Is there a way to infer the type of QueryKey?

[ashwinGokhale]

It looks like the type for QueryKey is

export type QueryKey = string | unknown[];

However, I feel like the typing can be narrowed down further than just unknown[].

Is there a way for react-query to automatically infer the type of my query key and have it passed it to the QueryFunctionContext?

For example:

const id: number = 5;
const { data } = useQuery(
    ['posts', id] as const,
    ({queryKey}) => {   // <-- type of queryKey is any, but it is actually: readonly ["posts", number]
      const postId: number = queryKey[1].id;
      return fetchPost(postId);
    }
  );

I think I can just create my own type that extends from QueryFunctionContext, but I would prefer that react-query infers the type for me so that I don't have to create my own type.

[TkDodo]

It’s kinda hard to do with typescript. The preferred way would be inline functions, because you need to have access to id anyways when building the key:

const { data } = useQuery(
    ['posts', id] as const,
    () => fetchPost(id)
  )

[Dema]

But it was working in previous version.. The issue now that it is very easy to forget to include id in the key array. In old version use won't forget it because you had to extract you params from queryKey. This seems like a giant step back from what was available in 2.x

[TkDodo]

I agree that the typings could be improved - it would be awesome if the queryContext.queryKey that is passed to the queryFunction would infer the type from the passed query key. As far as I know it's quite hard to achieve because you can define the key globally on the queryDefaults and then there are overloaded versions of useQuery that don't have a key at all. Do you want to give it a shot?

Also, I am not sure it was better in v2. The query key being spread into your query function was also never type safe, you could just do:

const fetchPost = (key: string, id: number, something: string): Promise<Todo> => (...)

const { data } = useQuery(
    ['posts', { something: 'completely wrong' }],
    fetchPost,
  )

and typescript was totally fine with it 🤷

[Dema]

No, it actually worked....

  const fetchPost = (
    key: string,
    id: number,
    something: string
  ): Promise<string> => {
    return Promise.resolve(something);
  };

  const { data: data1 } = useQuery(
    ["posts", { something: "completely wrong" }],
    fetchPost
  );

No overload matches this call.
  Argument of type '[(key: string, id: number, something: string) => Promise<string>]' is not assignable to parameter of type 'UseQueryRest<string, [string, { something: string; }], Error>'.
    Type '[(key: string, id: number, something: string) => Promise<string>]' is not assignable to type '[QueryOptions<string, Error>]'.
      Type '(key: string, id: number, something: string) => Promise<string>' has no properties in common with type 'QueryOptions<string, Error>'.
  Overload 2 of 4, '(queryKey: string | false | null | undefined, ...rest: UseQueryRest<string, [string], Error>): QueryResult<string, Error>', gave the following error.
    Type '{ something: string; }' is not assignable to type 'string'.

It works even if I do this

const { data: data1 } = useQuery(["posts", 1, 1], fetchPost);

No overload matches this call.
  Argument of type '[(key: string, id: number, something: string) => Promise<string>]' is not assignable to parameter of type 'UseQueryRest<string, [string, number, number], Error>'.
    Type '[(key: string, id: number, something: string) => Promise<string>]' is not assignable to type '[QueryFunction<string, [string, number, number]>]'.
      Type '(key: string, id: number, something: string) => Promise<string>' is not assignable to type 'QueryFunction<string, [string, number, number]>'.
        Types of parameters 'something' and 'key_2' are incompatible.
          Type 'number' is not assignable to type 'string'.

[TkDodo]

interesting, I just tried this out on one of my projects where we still use react-query 2.25.2, and we have typescript 3.9.7 and there is no complaint 🤔 .

[Dema]

I'm using typescript: 3.9.7 and react-query 2.5.10. Looks like it was broken at some point.

[Dema]

I've found the broken version: 2.7.1 works, 2.8.0 doesn't

[TkDodo]

ah that's good news - at least it's not a 3.x regression then :) And since it was working before, it's likely possible to get it to work with the context as well. Do you want to take a stab at this?

[Dema]

I could try.. I don't really have a lot of experience in infer stuff, but I reaally, reaaaally want this typecheck to work, this was a killer feature for me!! 😄

[Dema]

There was a commit 73ccba8 that fully reworked all the types.

[Dema]

I think it'll be easier to just revert that commit. All types are completely changed, I don't think I can fix anything there.

[TkDodo]

Hmm seems like this was on purpose. From the PR:

Remove the type connection between the query key and the query function parameters because this does not match with the API. Parameters can be filtered with queryFnParamsFilter or added with for example the fetchMoreVariable variable. This also simplifies the typings for less experienced TS users.

But maybe we can bring it back now that we have the QueryContext? @boschni FYI

[boschni]

Think we should be able to infer the query key now because in V3 because the queryFnParamsFilter option is removed and the pageParam property has been separated from the query key.

[Dema]

This would be amazing! I love to have everything I can to be typechecked! 😄 v1.5 did a great thing in type inference allowing to infer query key types. It was such a disappointment when I upgraded to v3 and saw any's everywhere :)

Also, I think we should add a react-query/exhausive-deps eslint rule #1490. I'm not sure I can pull this off. I've looked at react-hooks rule and there's a lot of AST stuff going on :)

[xaun]

Ive just installed react-query to replace useSWR on a query, and the fetching works so much better! But the types aren't being inferred here anymore. Is there something I need to do or is this just not being done as well in react-query?

useSWR([url, arg1, arg2], (url, arg1, arg2) => // types of args match

useQuery([url, arg1, arg2], ({ queryKey }) => {
  const [url, arg1, arg2] = queryKey
  // types of args dont match

[TkDodo]

Use const assertions. See also this stackoverflow answer: https://stackoverflow.com/a/69002372/8405310

So in your case:

useQuery([url, arg1, arg2] as const, ({ queryKey }) => {
  const [url, arg1, arg2] = queryKey