How to prevent useQuery from triggering refetch after queryClient gets hydrated with error state?
SSRuseQuerytypescript
I'm using react-router and react-query. In route's loader I have:
This code only runs on server-side and is wrapped in try-catch.
To prevent client-side from refetching that data again when hydrated, I configured hydrate/dehydrate of quesryClient state in router config:
When I open the page in a new tab:
1. Server fetches data in loader (ensureData throws error, e.g. because API responded with 401);
2. Server renders page (e.g. with "Sign in or Sign up" link) and returns it to client;
3. Browser displays page with server-fetched data;
4. Client-side queryClient gets hydrated with server's queryClient's state (including queries with errors);
5. A component calls useQuery;
6. For some reason client-side queryClient decides to fetch that query again on its own instead of using the cached state (which has isError = true, of course)
So, my question is how do I prevent the (6) from happening. I can clearly see in logs that client-side queryClient has the exact state I want (error response that server got from API during SSR), but it still fetches data again. I guess this happens because it sees the query state has an error. But isn't there an option to stop useQuery from refetching such "errored" queries?
(retries are disabled everywhere, staleTime = 999999, refetchOnMount = false)
await context.queryClient.ensureQueryData(queryKey, options)This code only runs on server-side and is wrapped in try-catch.
To prevent client-side from refetching that data again when hydrated, I configured hydrate/dehydrate of quesryClient state in router config:
When I open the page in a new tab:
1. Server fetches data in loader (ensureData throws error, e.g. because API responded with 401);
2. Server renders page (e.g. with "Sign in or Sign up" link) and returns it to client;
3. Browser displays page with server-fetched data;
4. Client-side queryClient gets hydrated with server's queryClient's state (including queries with errors);
5. A component calls useQuery;
6. For some reason client-side queryClient decides to fetch that query again on its own instead of using the cached state (which has isError = true, of course)
So, my question is how do I prevent the (6) from happening. I can clearly see in logs that client-side queryClient has the exact state I want (error response that server got from API during SSR), but it still fetches data again. I guess this happens because it sees the query state has an error. But isn't there an option to stop useQuery from refetching such "errored" queries?
(retries are disabled everywhere, staleTime = 999999, refetchOnMount = false)
