Setting staleTime when passing in initialData server side works but prevents refetching when variables change

[CapitanRedBeard]

Using version 4.36.1 of @tanstack/react-query

I'm using react-query in NextJS and fetching data on server side then passing it down to the client side to set as initialData. This works great and prevents the call from being fired initially. However if I add in the staleTime param and set it to 1second staleTime: 1000 it will not longer trigger refetching when variables change.

This is how my query is setup:

  const {
    data,
    error,
    fetchNextPage,
    fetchPreviousPage,
    hasNextPage,
    hasPreviousPage,
    isFetching,
    isFetchingNextPage,
    isLoading,
    status,
  } = useInfiniteQuery(
    ['campaignslist'],
    async (): Promise<CampaignOrdersQuery> =>
      client.request({
        document: CampaignOrdersDocument,
        variables: {
          filter: { keyword: searchText },
          id: campaignId,
          pageSize,
        },
      }),
    {
      getNextPageParam: lastPage => {
        const pageInfo = lastPage?.campaign?.orders?.pageInfo;
        const cursor = pageInfo?.hasNextPage ? pageInfo?.endCursor : null;
        if (cursor) {
          return { cursor };
        }
        return undefined;
      },
      initialData: () => ({
        pageParams: [undefined],
        pages: [initialData],
      }),
      refetchOnWindowFocus: false,
      staleTime: 1000,
    },
  );

When I change the value of searchText via an input it will not re-trigger a fetch of the data. However if I remove staleTime then it will fetch the query initially on mount when on clientSide and for every re-render when searchText changes.

I'm wondering if staleTime has a bug that is preventing re-triggering of the data or I've set something up wrong. I can create an issue if we think this is a bug/misbehavior

[TkDodo]

this is the expected behaviour when combining initialData with staleTime. initialData is put into the cache, and staleTime tells you how long cached data should be considered fresh. So if you combine the, initialData will be considered fresh for 1 second, thus there is no need to refetch when the component mounts.

There are a couple of things you could do, depending on your use-case:

1. set initialData only for the variables where you actually want initialData
2. set initialDataUpdatedAt to a timestamp that will make it be considered stale, e.g. 0
3. use placeholderData instead of initialData (see: https://tkdodo.eu/blog/placeholder-and-initial-data-in-react-query)
4. switch from the initialData approach to hydration

[jpmarra]

@TkDodo, in the use case mentioned above, the component has already mounted and has shown data within the rendered table. After the mount and the 1000ms stale time expires, the user interacts within an input which ultimately changes the searchText variable. Shouldn't variable changes trigger the query again if its after mount and the stale time window has passed?

[TkDodo]

if you change the searchText, and its part of the queryKey, you don't get a "refetch". You get a new cache entry and a new initial fetch for that Query. Except that you also pass intitialData for that query again, which like I said in option 1, you shouldn't do if you don't want that.

Maybe this explains it better:

const [variables, setVariables] = useState(1)
useQuery({
  queryKey: ['something', variables]
  queryFn: () => fetchSomething(variables),
  initialData: variables === 1 ? myInitialData : undefined
})

if I don't make the extra comparison, I provide initialData to all cache entries, even if the variable isn't the initial value anymore ...

[jpmarra]

Thanks for the example, I understand what you mean.

[CapitanRedBeard]

Thanks @TkDodo ! This is exactly what I needed!