Next.js - initialData from server, staleTime and queryKey

[kdoroszewicz]

I have an interface that shows products and above that a smaller section with promoted products for currently selected category.

My query key looks like this: ["promotedProducts", currentCategory]. I'm populating this query with initial data fetched on the server and currently I'm running into and issue with double fetching - once on the server and second time after page load.

I tried to solve this by setting staleTime on the query but in that case currentCategory changes don't trigger fetching new promoted products because staleTime hasn't passed yet. The change in queryKey only works again after stale time passes.

Expected result:

1. Initial data is fetched on the server
2. Initial data is loaded with initialData config option into the query.
3. The query is not run on client side first load.
4. The query is run even if the user changes category immediately after opening the page.

Am I missing something or is this not a use case that's valid for react-query? I'm pretty sure I can work around it but it seems like a potentially overlooked feature.

[TkDodo]

I tried to solve this by setting staleTime on the query but in that case currentCategory changes don't trigger fetching new promoted products because staleTime hasn't passed yet. The change in queryKey only works again after stale time passes.

changes in query key will switch to that cache entry, and if that entry has fresh data, that one will be taken without refetch, so that is expected. if you change to a category that does not yet have data, you should get a hard loading state.

please keep in mind that when providing initialData, it will be passed to all query keys:

useQuery(
  [todo, id],
  () => fetchTodo(id),
  { initialData: { title: 'my todo' } }
)

if I change from id 1 to id 2, id 2 will also get that initial Data. combined with staleTime, it will result in a "no-fetch" scenario. solutions are:

1. narrow the key for initial data

useQuery(
  [todo, id],
  () => fetchTodo(id),
  { initialData: id === 1 ? { title: 'my todo' } : undefined }
)

now, only todo with id 1 will get the initial data, others don't.

2. use hydration to prefill the cache rather than initialData.

[kdoroszewicz]

I think the first solution is what I'm looking for, I'll check it tomorrow and mark is as the answer if it works correctly ;) Thank you @TkDodo

[chinanderm]

Thanks for the explainer on this @TkDodo! Very helpful with paginated queries where page 1 data is provided via initialData but need to fetch subsequent pages yet utilize staleTime.