9

Why should I use QueryClient.prefetchQuery instead of useQuery for caching in React-Query?

I don't see any valuable use case. If I want to prefetch, I could just use useQuery when the app is loaded without actually using the fetched values. When I use it somewhere else, I would get the cached result from the previous useQuery. At least this is how I see things.

But I think I'm missing something. Maybe SSR related.

Improve this question

4 Answers 4

Reset to default
10

Have you read the docs on prefecthing? It can be used to fetch something before you render it so that you can see the data instantly once the user navigates to it. If you wait until useQuery tries to read the data, you will inevitably fetch later and thus see a loading spinner.

We also use prefetching in one of our examples: https://tanstack.com/query/v4/docs/react/examples/react/prefetching

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

With the example, it's clearer, thanks. I was missing the use case for prefetching on event, that is obviously not possible with a hook.
You didn't really answer the question here, you just stated how useQuery is preferred to be used by the framework designers, you didn't explain why that is. There is nothing preventing a person from calling useQuery beforehand in a parent component, and why shouldn't they? That's the OPs point. Another poster provided the answer - useQuery will refetch when cache is invalidated, prefetchQuery will not.
That’s a difference, yes, but also not the answer, because it’s not “prefetchQuery vs useQuery”, it seems to be: “prefetchQuery + useQuery” vs “useQuery in a parent + useQuery in a child”. In that case, I think I’ve answered it because “useQuery in a parent” has to wait until the parent renders, while prefetchQuery can be done earlier (as it’s not a hook) - before you render. This could be a route loader or an onMouseOver handler on a link you’re about to click.
5

A key difference between prefetchQuery and useQuery is that useQuery will re-execute (and so trigger a re-render) whenever the cache for its queryKey is invalidated, whereas prefetchQuery will not.

So if you have a mounted useQuery hook and you execute a mutation against its query key and use invalidateQueries, then the useQuery hook will re-render. However, the prefetchQuery would not re-render.

If you are literally just prefectching data then you do not want the fetch hook to repeatedly trigger a re-render later on whenever its cache is invalidated, and this is the use case for prefetchQuery.

So although prefetchQuery may seem to perform the same function as useQuery it should be the preferred option for prefetching.

Improve this answer

1 Comment

This should be the preferred answer since it's the only one which understands / answers the question.
2

Another significant distinction is that prefetchQuery can be used in both the client and server components while useQuery is only allowed in the client component. This is very helpful if you are using the Next.js /app directory, namely, everything defaults to be a server component, contrary to the /pages directory, where everything defaults to be a client component.

Improve this answer

Comments

1

UseQuery is used when the component is mounted or simply when it is destructured from a view.

const { queryProblem, queryComments } = useIssue();

queryClient.prefetchQuery is used before mounting a component, to make a request with arbitrary code apart from a condition or event.

For example, you could execute a prefetchQuery when the OnMouseEnter event fires.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.