无效从突变在React查询

Question

我在后台使用反应查询useMutation上传图像。一切都工作正常，但是在useMutation的onSuccess当invalidateQueries被调用时，它在后端成功执行POST请求之前无效useQuery。所以我必须刷新页面以获取新图像。

输入图片描述

const { data: usermedia,} = useQuery(["usermedia"],() => {
return getInfo("http://127.0.0.1:8000/usermedia/").then((t) => t.json());}, 
);

const mutation = useMutation(
(body) => postMedia("http://127.0.0.1:8000/usermedia/", body),
{ 
onSuccess:(data,) => {
console.log("Got response from backend successfull", data); 
client.invalidateQueries("usermedia")

},
onError(error) {
console.log("Got error from backend", error);},
}
);

我期望在POST完成后端或在无效useQuery后触发1秒后失效查询。

Answer 1

您可能想尝试返回invalidatequeries调用，如下所示https://tkdodo.eu/blog/mastering-mutations-in-react-query

{
// 🎉 will wait for query invalidation to finish
onSuccess: () => {
return queryClient.invalidateQueries(['posts', id, 'comments'])
}
}
{
// 🚀 fire and forget - will not wait
onSuccess: () => {
queryClient.invalidateQueries(['posts', id, 'comments'])
}
}