Theo's Typesafe Cult•2y ago

React query prefetch and fetch

Using react-query, what happens if you prefetch and while the prefetch is still happening, you click on a button (or whatever that triggers fetch) that fetches? Does the prefetch get cancelled, or does the fetch get cancelled? If both do not get cancelled, which data would be used? What if the prefetched data are stale and the fetched data come before the prefetched data?

8 Replies

JacobMGEvans•2y ago

Based on Post Guidelines, rule #2 did you look into this first? Quick answer: If you trigger a fetch while prefetching is still happening, both the prefetching and the fetch will continue. React Query will use any existing data in the cache first, even if it's from an incomplete prefetch. If the newly fetched data is more recent, it will update the cache and any components using that data.

shikishikichangchang•2y ago

Sorry. I only saw theo's guidelines in the channel "rules". Wasnt aware there were more. Can you link? Where did you find that answer? Is it in the docs somewhere cause I couldn't find any supporting information So you're saying 1. Both prefetch and fetch do not get cancelled 2. If prefetching is halfway done and the user triggers a UI change (mounts a component that uses useQuery, let's say), the UI will use any data, if exist, in the cache and once the newly triggered fetch completes, RQ will sync the cache with the data and so will the UI, 3. If fetch has new data, RQ will use that Am I accurate?

JacobMGEvans•2y ago