英文:
Invalidate queries doesn't work when user navigates via NextJS routes
问题
在我的NextJS应用中，用户有机会查看列表并添加数据。
当用户将项目添加到列表时，可以使用queryClient.invalidateQueries({ queryKey: ['branchList'] });来使其查询无效。
然而，当用户返回列表页面时，查询不会重新获取数据，用户会得到过时的列表。
我已经在StackOverflow上阅读了类似的问题（比如这个问题），并确认我只在_app文件中使用了new QueryClient一次：
const queryClient = new QueryClient({
defaultOptions: {
queries: {
refetchOnWindowFocus: false,
refetchOnMount: false,
refetchOnReconnect: false,
retry: 1,
staleTime: Number.POSITIVE_INFINITY,
},
},
});
export default function App({ Component, pageProps }: AppProps) {
return (
<QueryClientProvider client={queryClient}>
<Layout>
<Component {...pageProps} />
</Layout>
</QueryClientProvider>
);
}
查询本身如下所示：
const { data, isLoading, error } = useQuery({
queryKey: ['branchList'],
queryFn: getAllBranches,
});
此外，我可以在控制台中看到查询是无效的：
对于这个问题，我会非常感激任何帮助。提前感谢！
英文:
In my NextJS app, user has an opportunity to view the list and to add data there.
When user adds the item to the list, its query is invalidated with queryClient.invalidateQueries({ queryKey: ['branchList'] });.
However, when user navigates back to the list page, the query does not refetch data and user gets the obsolete list.
I've read similar issues on StackOverflow (like this one) and can confirm I use new QueryClient only once in the _app file:
const queryClient = new QueryClient({
defaultOptions: {
queries: {
refetchOnWindowFocus: false,
refetchOnMount: false,
refetchOnReconnect: false,
retry: 1,
staleTime: Number.POSITIVE_INFINITY,
},
},
});
export default function App({ Component, pageProps }: AppProps) {
return (
<QueryClientProvider client={queryClient}>
<Layout>
<Component {...pageProps} />
</Layout>
</QueryClientProvider>
);
}
The query itself looks like this:
const { data, isLoading, error } = useQuery({
queryKey: ['branchList'],
queryFn: getAllBranches,
});
Also, I can see in console that the query is invalid:
I would really appreciate any help with this issue. Thanks in advance!
答案1
得分: 2
However, when user navigates back to the list page, the query does not refetch data and user gets the obsolete list.
您已将refetchOnMount设置为false。这是一个标志，表示应在使用useQuery的新组件挂载时重新获取陈旧数据或标记为invalid的数据。基本上，您选择不重新获取。
当staleTime设置为Infinity时，关闭所有标志没有实际意义。这些标志是触发器，告诉React Query在哪个点上重新获取陈旧查询。如果您的查询永远不会陈旧，您可以保留这些标志。这样，当您使用invalidateQueries标记它们为无效时，您将自动获取所需的自动重新获取，但每当组件挂载时都不会获取（因为staleTime）。
英文:
> However, when user navigates back to the list page, the query does not refetch data and user gets the obsolete list.
You have set refetchOnMount to false. This is the flag that indicates that stale data or data marked as invalid should be refetched when a new component mounts that uses that data via useQuery. So basically, you have opted out of refetching.
When staleTime is set to Infinity, there is no real point in turning off all the flags. The flags are triggers at which point react query will refetch stale queries. If your queries are never stale, you can leave the flags on. That way, you'll get automatic refetches that you apparently want when you've marked them as invalid with invalidateQueries, but you wouldn't get them any time a component mounts (because of staleTime).
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论