Initial data from cache

[sidv93]

Hi, first of all, thank you for this amazing library.
I'm trying to add initial data to a query from the existing cache. As shown here

I have a home page which displays a list of sites. When you click on a site, it takes you to the individual site page.
A simple CSB reproduction is here.

https://codesandbox.io/s/pensive-flower-lt235

I have two hooks useFetchSites and useFetchSite for fetching sites and individual site respectively. When the list of sites is loaded, I want to set the react-query cache with entries for individual sites as well.

I tried the initialData option in the useFetchSite hook, but it doesn't seem to fire when the list of sites are fetched.
Then, I tried to populate the cache on the onSuccess handler on useFetchSites hook. The cache is populated with individual entries for sites, but when I navigate to the site page, a network request is made to fetch the individual site.

Expectation is, when I fetch a list of sites, cache should be updated with entries for individual sites with ids, and when I navigate to the individual site page, data should be fetched from the cache and shouldn't make a network request.

Any help appreciated, thanks!

[TkDodo]

your code with initialData looks correct, I'm just not seeing anything because the sandbox requests data from http://localhost:4000/sites

can you maybe update the example to be runnable?

[sidv93]

Oh, sorry, replaced the fetch with a function which returns a Promise. Check it out now please.

[TkDodo]

you have a very simple problem: your id is once a number, and once a string. your find function does:

find((s) => s.id === id)

which doesn't find anything. It's a number in the cache, but a string when it comes from the url. TypeScript can help here ;)

[sidv93]

Silly me. Thank you for the quick response. Appreciate it!

[herrrey]

Interesting discussion 👀

Working with TanStack Query often feels like managing a living system—data is constantly evolving, being cached, refreshed, and synchronized automatically.

In a way, it reminds me of “tipos de flor de loto”. Different types of lotus flowers grow in changing environments but still maintain balance and beauty. Similarly, different query patterns (caching, invalidation, refetching) adapt to different states while keeping the app stable and predictable.

Sometimes the key isn’t forcing one rigid pattern, but choosing the right “type” for the situation—just like selecting the right lotus for the right environment