Facing duplicate request while using tanstack router with tanstack query
When I hover a Link with preload set to intent, a network request is called and the data gets saved on router (checked in router devtools). After clicking the link and viewing the page, another request is made and this response are being saved to tanstack query (checked in query devtools). What I am missing here?
8 Replies
exotic-emeraldOP•2y ago
exotic-emeraldOP•2y ago
exotic-emeraldOP•2y ago
I don't know why but codesandbox share link is almost 4k characters in length😅 . Having trouble sharing it here.
xenial-black•2y ago
Something to consider, when you are using the Router with Tanstack Query, you'll be using the Query library for caching.
As such, whatever is returned from the loader function of the Router doesn't matter since the Promise fetching your data is handled in Query.
By default Query tries to give you the newest/freshest possible version of that data, and since there's a time delay between the preload loader call and the actual navigation call, it then considers this data to be stale.
If you want to rely on this cache from Query (pre caching during preload), then you can use the
staleTime configuration to prevent a refetch too soon.
Also, you'll want to set the defaultPreloadStaleTime on in the constructor of new Router to 0.xenial-black•2y ago
You can find the staleTime configuration docs here under the useQuery hook.
https://tanstack.com/query/latest/docs/react/reference/useQuery
useQuery | TanStack Query Docs
const {
data,
exotic-emeraldOP•2y ago
Already doing this.
xenial-black•2y ago
Then you should be fine, unless something is drastically changing with the post id.
Try the Query Devtools and see what happens with that entry, if not enlist the folks over at #react-query-questions
exotic-emeraldOP•2y ago
Found the issue. Basically, there were two queryClients. One inside App for QueryProvider and another for router context. Fixed the issue.
Thank you for the help.