Setting initialData and not re-fetching when querykey changes

[shaadcode]

I first get the initial data from the server and I want to display the data immediately when the page is refreshed.

The problem is that useInfiniteQuery does not re-fetch when the queryKey changes.

const projectsQuery = useInfiniteQuery({
    queryKey: ['projects', 'category', sort ?? '', filtersString, params.slug, location ?? ''],
    queryFn: ({ pageParam = 1 }) => httpRequest<ProjectByCategoryBodyJSONSchema>({
      method: 'get',
      queryParams: {
        add: {
          ...(pageParam === 1 ? { with_filters_and_values: '' } : {}),
          ...(location ? { 'where_relation_filter[location->id]': location } : {}),
          ...(sort ? { 'order_filter[created_at]': sort } : {}),
          apply_values_filter: filtersString,
          with_category_details: '',
          includes: 'project_slider',
          per_page: 16,
          page: pageParam,
        },
      },
      url: projectsEndpoints.projectsByCategory(params.slug),
    }),
    initialData: params.initialData,
    initialPageParam: 1,
    getNextPageParam: (lastPage) => {
      const current = lastPage.meta?.current_page;
      const last = lastPage.meta?.last_page;

      return current < last ? current + 1 : undefined;
    },
  });

  return projectsQuery;

I tried placeholderData, but the problem is that it fetches the data when the page is hydrated (this is not correct because I have the same data on the server).

[TkDodo]

The problem is that useInfiniteQuery does not re-fetch when the queryKey changes.

It certainly does refetch when the QueryKey changes.

he problem is that it fetches the data when the page is hydrated

you need to set a staleTime for your query. From the docs:

Because staleTime defaults to 0, queries will be refetched in the background on page load by default. You might want to use a higher staleTime to avoid this double fetching, especially if you don't cache your markup.

[shaadcode]

It certainly does refetch when the QueryKey changes.

I am using tanstack query devtools to trace a query. When I set the initialData field, changing the queryKey does not cause a re-fetch!
devtools says that the previous query has been disabled. Is this a problem?

you need to set a staleTime for your query.

I have set staleTime globally for queries using the following code!

const makeQueryClient = () => {
  return new QueryClient({
    defaultOptions: {
      queries: {
        staleTime: 1000 * 60 * 5,
        retry: apiConfig.retry.maxCount,
        retryDelay: attemptIndex => Math.min(apiConfig.retry.delay * 2 ** attemptIndex, 30000),
        refetchOnWindowFocus: false,
      },
    },
  });
};

Anyway, if I want to fetch the initial data on the server side and display it on the client side and re-fetch it by changing the queryKey, is initialData better or placeholderData?

[TkDodo]

When I set the initialData field, changing the queryKey does not cause a re-fetch!

If initialData is applied unconditionally to every Query, it will be set for every query for key changes. So what happens is:

• you set key: ['foo', 1], initialData: 'foo'
• we apply initialData 'foo' to ['foo', 1]
• that data is considered fresh because of staleTime
• you change the key to ['foo', 2], initialData: 'foo'
• we apply initialData 'foo' to ['foo', 2]
• that data is considered fresh because of staleTime

so if you only want initialData for a specific key, you have to set it conditionally for that key only:

initialData: isTheQueryKeyTheKeyThatShouldHaveInitialData ? myInititialData : undefined

[TkDodo]

I just found out I have this in my FAQs 😂

• https://tkdodo.eu/blog/react-query-fa-qs#why-is-the-queryfn-not-called

[joseph0926]

I'm not fully aware of your complete code context, but based on what you've shared, this appears to be intended behavior.

While it's certainly expected that a query should refetch when the query key changes, let me explain what's happening in the code

When the queryKey changes, a new Query instance is created. At this point, getDefaultState is called

query/packages/query-core/src/query.ts

Lines 190 to 191 in f49cc75

	this.#initialState = getDefaultState(this.options)
	this.state = config.state ?? this.#initialState

Looking at the getDefaultState implementation

query/packages/query-core/src/query.ts

Line 713 in f49cc75

function getDefaultState<

When initialData exists, dataUpdatedAt is set to either initialDataUpdatedAt or Date.now().

Looking back at your code, the important points are that you have initialData and staleTime is set to 5 minutes.

To summarize your situation and the code flow
Query key changes → Query instance creation → getDefaultState called → dataUpdatedAt set to initialDataUpdatedAt or Date.now()

Now examining the refetch logic in packages/query-core/src/queryObserver.ts
shouldFetchOnMount will be called, and in your case, since query.state.data !== undefined is true, shouldFetchOn will be called, ultimately returning value === 'always' || (value !== false && isStale(query, options)).

Looking closely at isStale

query/packages/query-core/src/queryObserver.ts

Line 801 in f49cc75

function isStale(

It calls query.isStaleByTime(resolveStaleTime(options.staleTime, query)).
Looking at isStaleByTime

query/packages/query-core/src/query.ts

Line 309 in f49cc75

isStaleByTime(staleTime: StaleTime = 0): boolean {

It returns !timeUntilStale(this.state.dataUpdatedAt, staleTime).

And timeUntilStale

query/packages/query-core/src/utils.ts

Line 97 in f49cc75

export function timeUntilStale(updatedAt: number, staleTime?: number): number {

returns the time remaining until the data becomes stale.

In summary, isStaleByTime returns true (stale) when remaining time is 0, and false (fresh) when greater than 0.

Matching this to your situation

• dataUpdatedAt = Date.now() (just-set initial data)
• staleTime = 300000ms (5 minutes)
• timeUntilStale = Date.now() + 300000 - Date.now() = 300000ms
• isStaleByTime = !300000 = false
• Result: Data is fresh, so no refetch occurs

This is my understanding of why refetch doesn't occur even when the queryKey changes. What do you think?

---

And in my opinion, to perform the action you want,
you should either “set initialDataUpdatedAt: to 0” / “use placeholderData instead” / “set refetchOnMount: to ‘always’”.