关闭确认对话框后，React Query 无法使查询无效

Question

const handleMutationSuccess = {
    onSuccess: async (result) => {
      await queryClient.invalidateQueries("deleted_projects");
      toast({
        containerStyle: {marginBottom: "40px"},
        title: result.data.message,
        status: result.data.success ? "success" : "error",
        duration: 2000,
        isClosable: false,
      });


    },
  };

  const mutation = useMutation(deleteProject, handleMutationSuccess);

  const projectUndelete = (id) => {

    if (window.confirm("Do you want to restore this project?")) {
      mutation.mutate({project_id: id});
    }
  };

我无法在确认对话框关闭后使查询无效。我相信以下是原因：

在我点击确定或关闭确认对话框后，window 焦点事件触发重新获取，甚至在完成突变之前。

突变完成后，我尝试使“deleted_projects”无效，react 查询不会使“deleted_projects”无效，因为它只是重新获取。

因此，我会在页面上看到旧的结果，这是不正确的。有什么办法可以解决这个问题吗？

Answer 1

我认为您的分析很到位。这里有两个问题：

invalidateQueries 将不会“做任何事情”。如果您希望 invalidateQueries 取消正在进行的重新获取并开始新的重新获取，则必须将 cancelRefetch: true 作为选项传递。见 api docs here.

同样值得注意的是，我们已经为 v4 更改了此行为，v4 是目前处于测试阶段的下一个主要版本。我们认为，默认情况下，强制调用 invalidateQueries 应该取消重新获取并触发新的重新获取，以避免您刚才描述的陷阱。如果有人想选择退出该行为，则该标志仍然存在。看看 https://react-query-beta.tanstack.com/guides/migrating-to-react-query-4#consistent-behavior-for-cancelrefetch

浏览器 api 像 alert 或 confirm 打开另一个 window，所以一旦对话框关闭就会有一个焦点事件。如果您的查询过时，将会重新获取。我们有一个 issue here 描述了一些解决方法。可能最好的办法是不使用这些功能，但您也可以修改 react-query 的 focusMananger 以暂时禁用该行为。

关闭确认对话框后，React Query 无法使查询无效

React Query cannot invalidate queries after closing confirm dialog

reactjs

react-query