Next.js React Query useQuery发送无限获取请求

当我像下面一样使用useQuery时，它会以react query文档中使用的方式发送无限多的获取请求。文档还说fetch不会自动抛出错误。因此，我尝试了下面相同的代码，但是使用了一个try-catch块。我还尝试在useQuery钩子中的一个对象中配置staleTime，但没有成功，我真的不知道什么是stale time。哈哈，请帮帮我。努力在周一之前完成这个项目

在我的控制台中发现此错误：

(node:27609) UnhandledPromiseRejectionWarning: ReferenceError: navigator is not defined
    at OnlineManager.isOnline (/Users/benridesbikes/repos/photo_album/node_modules/react-query/lib/core/onlineManager.js:64:5)
    at /Users/benridesbikes/repos/photo_album/node_modules/react-query/lib/core/retryer.js:142:86
(Use `node --trace-warnings ...` to show where the warning was created)
(node:27609) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 3)
(node:27609) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

从“React”导入React；
从“react query”导入{useQuery，UseVaritation，useQueryClient}；
从“下一个/链接”导入链接；
从“../../components/styles/Form”导入表单；
从“../../components/styles/AlbumsIndex”导入容器；
从“../../components/styles/Button”导入按钮；
异步函数getAlbums（）{
const response=wait fetch（`api/albums/`）；
const{albums}=wait response.json（）；
归还相册；
}
异步函数createAlbum（newAlbum）{
const response=wait fetch（`/api/albums/create`{
方法：“张贴”，
标题：{
“内容类型”：“应用程序/json”，
},
正文：JSON.stringify（newAlbum），
});
const{album}=wait response.json（）；
返回相册；
}
异步函数deleteAlbum（albumId）{
等待获取（`/api/albums/delete`{
方法：“删除”，
标题：{
“内容类型”：“应用程序/json”，
},
正文：JSON.stringify（albumId），
});
}
导出默认函数索引（）{
const queryClient=useQueryClient（）；
const refetchQuery=async（）=>{
等待queryClient.refetchQueries（）；
};
const{data:albums，error}=useQuery（“albums”，getAlbums）；
const mutationCreateAlbum=useMutation（createAlbum{
onSuccess:refetchQuery（），
});
常量mutationDeleteAlbum=useMutation（deleteAlbum{
onSuccess:refetchQuery（），
});
常量[formData，setFormData]=React.useState({
姓名：“，
说明：“，
});
常量handleChange=（事件）=>{
setFormData（{…formData，[event.target.name]：event.target.value}）；
};
const handleSubmit=（事件）=>{
event.preventDefault（）；
mutationCreateAlbum.mutate({
名称：formData.name，
description:formData.description，
});
setFormData({
姓名：“，
说明：“，
});
};
const useDelete突变=（albumId）=>{
mutationDeleteAlbum.mutate({
id:albumId，
});
};
返回(
创建新相册
姓名：
说明：
handleSubmit（事件）}>
制作新专辑！
{相册&&
相册地图（（相册）=>(
{album.name}
{album.description}
UseDelete（album.id）}>
删除
))}
);
}

已解决！IDK了解此解决方案的具体工作原理。我有一种预感，这与挂钩和重新招标有关。简而言之，功能：

 const refetchQuery = async () => {
    await queryClient.refetchQueries();
  };

是什么不断发送回执一次又一次。解决方案是删除此函数，并在onSuccess之后将“queryClient.refetchQueries（）”作为异步函数调用，如下所示：

  const queryClient = useQueryClient();

  const { data: albums, error } = useQuery("albums", getAlbums);

  const mutationCreateAlbum = useMutation(createAlbum, {
    onSuccess: async () => await queryClient.refetchQueries(),
  });

  const mutationDeleteAlbum = useMutation(deleteAlbum, {
    onSuccess: async () => await queryClient.refetchQueries(),
  });

---

问题似乎是在声明变异时调用了

refetchQuery

函数：

  const mutationCreateAlbum = useMutation(createAlbum, {
    onSuccess: refetchQuery(),
  });

refetchQuery（）

是一种直接函数调用。您想要的是：

  const mutationCreateAlbum = useMutation(createAlbum, {
    onSuccess: refetchQuery,
  });

请注意缺少的调用括号，因此我们只是传递函数，而不是调用它。或：

  const mutationCreateAlbum = useMutation(createAlbum, {
    onSuccess: () => refetchQuery(),
  });

它声明一个新的内联函数，然后调用

refetchQuery

  const mutationCreateAlbum = useMutation(createAlbum, {
    onSuccess: () => refetchQuery(),
  });