preFetchQuery data isn't being used
I'm doing a prefetch of data in a client side component and then query the same key in a click interaction, but this seems to fetch the same data again, according to the browser's network activity.
After both fetches, the React Query devtools show that key as 'inactive'. I can see the state go from inactive to fetching on click and then on any subsequent, it's clearly accessing the cache.
How would I debug this further?
3 Replies
rare-sapphireOP•3y ago
The prefetch happens here: https://github.com/jschuur/learnchinese.club/blob/main/src/components/FlashCardList.tsx#L28
And then it gets queries on click here: https://github.com/jschuur/learnchinese.club/blob/main/src/hooks/useAudio.ts#L22
I'm basically trying to prefetch the first audio clip in a list of clips for a flashcard like app
rare-sapphireOP•3y ago
I've posted a few screenshots of my network tab and the RQ devtools here: https://github.com/TanStack/query/discussions/5399
GitHub
preFetchQuery cached data isn't being used and data is 'inactive' ·...
In a Next.js 13.4.1 app directory app, I'm doing a prefetch of data in a client side component and then query the same key in a click interaction, but this seems to fetch the same data again, a...
rare-sapphireOP•3y ago
OK, I have a hunch what is going on here. My component first renders serverside at build. And that's where it prefetches, and when it renders in the browser, it's hydrating from a different query cache.
That doesn't solve it yet. Still doesn't get it from the cache, It's still 'inactive' even though it prefetches client side now
Refactored some things and ultimately resolve this issue. Had a secondary cache that I just offloaded into RQ too.