React Query useQuery发送无限的提取请求

Question

当我按照下面的方式使用useQuery时，按照它在react query文档中的使用方式，它会发送无限数量的获取请求。文档还说fetch不会自动抛出错误。所以，我尝试了下面相同的代码，但是getAlbums使用了try-catch块。我也尝试过在useQuery钩子中的一个对象中配置staleTime，但它不起作用，我真的不知道什么是staleTime。哈哈，请帮帮我。试图在周一之前完成这个项目

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

(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.

import React from "react";
import { useQuery, useMutation, useQueryClient } from "react-query";
import Link from "next/link";
import Form from "../../components/styles/Form";
import Container from "../../components/styles/AlbumsIndex";
import Button from "../../components/styles/Button";
async function getAlbums() {
const response = await fetch(`api/albums/`);
const { albums } = await response.json();
return albums;
}
async function createAlbum(newAlbum) {
const response = await fetch(`/api/albums/create`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(newAlbum),
});
const { album } = await response.json();
return album;
}
async function deleteAlbum(albumId) {
await fetch(`/api/albums/delete`, {
method: "DELETE",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(albumId),
});
}
export default function Index() {
const queryClient = useQueryClient();
const refetchQuery = async () => {
await queryClient.refetchQueries();
};
const { data: albums, error } = useQuery("albums", getAlbums);
const mutationCreateAlbum = useMutation(createAlbum, {
onSuccess: refetchQuery(),
});
const mutationDeleteAlbum = useMutation(deleteAlbum, {
onSuccess: refetchQuery(),
});
const [formData, setFormData] = React.useState({
name: "",
description: "",
});
const handleChange = (event) => {
setFormData({ ...formData, [event.target.name]: event.target.value });
};
const handleSubmit = (event) => {
event.preventDefault();
mutationCreateAlbum.mutate({
name: formData.name,
description: formData.description,
});
setFormData({
name: "",
description: "",
});
};
const useDeleteMutation = (albumId) => {
mutationDeleteAlbum.mutate({
id: albumId,
});
};
return (
<Container>
<Form>
<h1>Create a New Album</h1>
<label htmlFor="name">
Name:
<input
type="text"
id="name"
name="name"
value={formData.name}
onChange={handleChange}
placeholder="Give Your Album a Name!"
/>
</label>
<label htmlFor="description">
Description:
<input
type="text"
id="description"
name="description"
value={formData.description}
onChange={handleChange}
placeholder="Give Your Album a Description!"
/>
</label>
<Button onClick={(event) => handleSubmit(event)}>
Make New Album!
</Button>
</Form>
<div className="albums">
{albums &&
albums.map((album) => (
<div className="album" key={album.id}>
<Link href={`/albums/${album.id}`}>
<a>
<Button>{album.name}</Button>
</a>
</Link>
<h3>{album.description}</h3>
<Button onClick={() => useDeleteMutation(album.id)}>
Delete
</Button>
</div>
))}
</div>
</Container>
);
}

Answer 1

问题似乎是在声明突变时调用refetchQuery函数：

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

refetchQuery()是一个直接的函数调用。你想要的是：

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

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

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

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

Answer 2

已解决！IDK正是为什么这个解决方案有效。我有一种预感，这与钩子和React重新绘制有关。简而言之，功能：

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

是什么不断发送一次又一次的获取。解决方案是删除此函数，改为在onSuccess之后调用"queryClient.refacechQueries(("作为异步函数，如下所示：

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(),
});