Query reloads
Hey, My App reloads all react queries every 5 minutes even if I'm continuously interacting with the app. Struggling to find the root cause. Any pointers to debug this further? Below is my client configuration
export const queryClient = new QueryClient({
defaultOptions: {
queries: {
refetchOnWindowFocus: false,
refetchOnmount: false,
refetchOnReconnect: false,
retry: false,
staleTime: 5*60*1000,
},
},
});
<QueryClientProvider client={queryClient}>
<App>
</QueryClientProvider>2 Replies
absent-sapphire•2y ago
you'd need to show a reproduction please
generous-apricotOP•2y ago
Ok I understand it is difficult to suggest without reproduction..
Now that I have found some thing after debugging, that this issue happens only when react query is integrated along with react router using loaders. I've tried to follow this blog, but I dont know if I have missed anything
https://tkdodo.eu/blog/react-query-meets-react-router
Below is the short snippet. If at all you spot any issues here ? Thanks in advance.
import queryClient from '../query';
const detailsQuery = () => ({
queryKey: [QUERY_KEYS.FETCH_DETAILS],
queryFn: () => fetchAllDetails(),
});
export const detailsLoader = () => async () => {
const query = detailsQuery();
// return data or fetch it
return queryClient.getQueryData(query.queryKey) ?? queryClient.fetchQuery(query);
};
**Router.js**
path: ':type?/:details',
element: <View/>,
loader: detailsLoader(),React Query meets React Router
React Query and React Router are a match made in heaven.