Accessing the same cache from multiple components

[Jake-Prentice]

I'm fetching quizzes from the backend, I have information like the title and the contents, configurations ect...I'm loading it in at once when a sidebar opens:

//loading data
const {data: quizzes, isLoading} = useQuery("quizzes", fetchQuizzes, {
     onError: err => setError(err.message)
});

I then want to access the contents of the quiz within another component - it looks like this

I was wondering about best practices, I could pass the data down the tree, or create a context but I felt that's the reason I used react-query - to stop managing loading data in context/state. What I did was just fetch the data from the cache by doing -

./contentsCard

const quizzes = queryCache.getQueryData("quizzes");

but I don't get any of the isLoading, status things. Is this an acceptable way to do it?

[TkDodo]

The recommended way would be to just call useQuery again, or abstract the useQuery away in a custom useQuizzesQuery hook and call that whenever you need the data. React query will give you the data from the cache and subscribe you to it, and also perform a background refetch when the component mounts.

[Jake-Prentice]

thanks, I don't know why I didn't think of that, really helpful! :)

[Jake-Prentice]

I'm guessing if useQuery already sees that the cache point "quizzes" exists, it won't try and fetch using the "fetchQuizzes" function and the data will just be that cached quizzes?

[TkDodo]

it will re-fetch when a new observer mounts and the data is considered stale (depending on staleTime).

Please read these two sections in the docs on that topic:
https://react-query.tanstack.com/docs/guides/important-defaults
https://react-query.tanstack.com/docs/guides/caching

(the explanation by example in the caching guide is really good)

[Jake-Prentice]

Ok thanks 🙏

[John-Paul-R]

Links are dead

Updated links (for v3):

• https://tanstack.com/query/v3/docs/framework/react/guides/caching
• https://tanstack.com/query/v3/docs/framework/react/guides/important-defaults

[cgvalayev]

What about a case when I need to see if mutation is loading from different components to avoid duplicate requests?

[TkDodo]

That's what useIsMutating is for