T
TanStack3y ago
rare-sapphire

why serving from cache mechanism stops working?

I am using @tanstack/react-query and react-router-dom for a simple app. The moment I introduce routing mechanism serving data from cache stops working and every request for data seems to trigger full scale request over the network. here is the sample app: https://stackblitz.com/edit/vitejs-vite-gsg5rw?file=src%2FApp.tsx,src%2Fhooks%2FuseCharacterDetails.ts,src%2Fhooks%2FuseCharacters.ts&terminal=dev
StackBlitz
Vitejs - Vite (forked) - StackBlitz
Next generation frontend tooling. It's fast!
6 Replies
genetic-orange
genetic-orange3y ago
because your links are a tags which perform a full page reload, which throws the cache away (it lives in-memory) you need the Link component from the router
rare-sapphire
rare-sapphireOP3y ago
I tried to change it but still seems navigation between components trigger full reloads I think this is somehow related to react-router-dom
genetic-orange
genetic-orange3y ago
Yeah sounds like it
rare-sapphire
rare-sapphireOP3y ago
Have you ever encountered similar issue before or heard someone else had it?
genetic-orange
genetic-orange3y ago
Can you show the version you have with the right link?
rare-sapphire
rare-sapphireOP3y ago
Version of react-query? In general what is the purpose of query keys? Is it used to group results of the query by?

Did you find this page helpful?