Feature request: Allow some variable names from @tanstack/query/exhaustive-deps

[rhuanbarreto]

I normally create custom hooks that return queries that depends on other values, like an authentication token. I use the authentication token in queryFn but then the eslint rule @tanstack/query/exhaustive-deps requires the token to be in the query key, which is not good once authentication tokens are not supposed to be part of a query key.

It would be good to configure the rule with a list of allowed names to not require them in the queryKey, like token

[TkDodo]

if your code looks like this:

const { token } = useAuth()
const query = useQuery({
  queryKey: ['something'],
  queryFn: () => fetchSomething(token)
})

then the rule is technically correct because you are closing over token and you might run into stale closure issues like that. Adding the token to the key is likely not the solution though.

The real question is: Why is token part of the React lifecycle ? Ideally, you'd just call fetchSomething(), and that would read the token in an interceptor or middleware and attach it to the header. Or, you would have a stable function like getLatestToken() that you can import, which you could then call in your queryFn:

queryFn: async () => {
  const token = await getLatestToken()
  return fetchSomething(token)
}

but ideally, all of this would live outside of react ...

[laviddichterman]

I think this is addressed by #10295 ?

[Mario-Eis]

We also have a usecase for this:

We manage our http environment with react providers. e.g. for dynamic auth szenarios
So queries typically look like this:

    const http = useHttp();

    useQuery({
        queryKey: ["resource", id],
        queryFn: async () => (await http.get(`/resource/${id}`)).data
    });

After the latest tanstack query update we got a list with >100 warnings.

[TkDodo]

We shipped this yesterday

[rhuanbarreto]

We shipped this yesterday

Thanks a lot!!!

[Mario-Eis]

allowlist -> types seems to have a very strange behaviour.

            "@tanstack/query/exhaustive-deps": [
                "error",
                {
                    "allowlist": {
                        "types": ["AxiosInstance", "Keycloak"],
                    }
                }
            ]

Only works for around 70% of cases. I can not figure out why.

For example:

 ERROR(ESLint)  The following dependencies are missing in your queryKey: httpClient (@tanstack/query/exhaustive-deps)

     7 |     const httpClient = useHttp();
     8 |
  >  9 |     return useQuery<OrderNavigationReference, AxiosError>({
       |                                                           ^
  > 10 |         queryKey: ["navigation", "orders", "previous", orderId, searchParams],
       | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 11 |         queryFn: async () => (await httpClient.get<OrderNavigationReference>(`/order-management/orders/${orderId}/previous-navigation-reference`, {params: searchParams})).data,
       | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 12 |         enabled: false
       | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 13 |     });
       | ^^^^^^
    14 | }

httpClient is of type AxiosInstance. Strange thing is: It works on other places that seems to be completely the same use case.
Keycloak is not recognized at all.

I dont know how this works internally. But I can not provide real types, only type names as strings. And my IDE references the string type name to a wrong, deprecated type for Keycloak. Probably is has to do with something like this...