useQuery not changing variables on retrying in case of error

[singhayush1403]

Describe the bug

I am using this query for an API call which uses an authToken, accessed using the useAuth hook. The authtoken expires in a fixed amount of time, so if the API returns token expired, I refetch the authToken and then the retry happens. The authToken is being updated, but the query is being retried with the old token.

const useAppAssets = <T = AppAssetsData>({
  onError,
  ...options
}: Options<T> = {}) => {
  const authToken = useAuth((auth) => auth.token);
  const initQuery = useQuery({
    queryKey: QueryKeyGenerator.AppAssetsData(),
    queryFn: async () => {
      if (!authToken) {
        throw new Error('no auth token');
      }
      const data = await getAppAssets({ authToken });
      return data;
    },
    cacheTime: Infinity,
    enabled: true,
    refetchOnReconnect: true,
    refetchOnWindowFocus: true,
    retry: (count: number, error: Error) => {
      return retryCondition(count, error);
    },
    retryDelay: (failureCount: number, error: Error) => {
      return retryDelayCondition(failureCount, error);
    },
    staleTime: Infinity,
    onError: (error: Error) => {
      if (onError) {
        onError(error);
      }

      Logger.error({
        error: new Error('failed to fetch assets'),
      });
    },
    ...options,
  });

  return initQuery;
};

Your minimal, reproducible example

No example

Steps to reproduce

no repro

Expected behavior

The query should be retried using the new authToken

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• OS : iOS,Android

Tanstack Query adapter

react-query

TanStack Query version

v4.16.1

TypeScript version

No response

Additional context

No response

[TkDodo]

you are closing over the authToken without having it as a part of the QueryKey, so your queryFn won’t know about it changing and you’ll run into stale closure problems.

you’d want to either add everything you use in the queryFn to the queryKey (we have a lint rule for that), or, in terms of authToken, it’s probably better to imperatively read it in the queryFn / on your fetch layer.

queryFn: () => {
  const authToken = getCurrentAuthToken()
  const data = await getAppAssets({ authToken });
}