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!