如何防止RTK Query删除资源后getPost查询自动重取？

针对你遇到的删除文章后，活跃的getPost查询因标签失效自动重取返回404的问题，有几个直接的解决思路：

1. 调用invalidateTags时禁用活跃查询重取 #

RTK Query的invalidateTags方法支持传入配置选项，其中refetchActive默认值为true（会重取所有活跃的相关查询）。将其设为false后，只会标记缓存为失效，不会触发当前活跃的getPost查询重取，后续进入列表页的新查询会自动获取最新数据：

const handleDelete = async () => {
  await deletePostMutation(postId).unwrap();
  // 失效标签时跳过活跃查询的重取
  dispatch(api.util.invalidateTags(
    [{ type: 'Posts', id: postId }],
    { refetchActive: false }
  ));
  navigate('/posts');
};

2. 跳转前取消详情查询的订阅 #

在删除成功后，先调用useGetPostQuery返回的unsubscribe方法取消查询订阅，让getPost不再处于活跃状态，之后再失效标签和跳转：

const { unsubscribe } = useGetPostQuery(postId);

const handleDelete = async () => {
  await deletePostMutation(postId).unwrap();
  // 取消详情查询的订阅，使其不再活跃
  unsubscribe();
  dispatch(api.util.invalidateTags([{ type: 'Posts', id: postId }]));
  navigate('/posts');
};

3. 动态禁用getPost查询 #

通过状态标记资源已删除，给useGetPostQuery添加enabled条件，删除后直接禁用查询，避免后续的重取请求：

const [postDeleted, setPostDeleted] = useState(false);
const { data: post } = useGetPostQuery(postId, {
  enabled: !postDeleted
});

const handleDelete = async () => {
  await deletePostMutation(postId).unwrap();
  setPostDeleted(true);
  dispatch(api.util.invalidateTags([{ type: 'Posts', id: postId }]));
  navigate('/posts');
};

这三个方法里，第一种是最直接的，不需要修改组件内的查询状态，仅通过调整invalidateTags的配置就能解决问题。

内容的提问来源于stack exchange，提问作者marnits