Unable to type-safe destructure queryKeys from QueryFunctionContext because of invalid TypeScript types since v3.15.2

[TotomInc]

Hi, I recently upgraded from a previous version (3.13.12) to the most recent version (3.16.0), and noticed a typechecking error while compiling my TypeScript project, which wasn't here when I upgraded react-query.

After some tweaking on the react-query version, I noticed that the version 3.15.2 was the culprit with the changes related to #2200 and how are queryKeys are handled at runtime.

Here is an example of my source-code, which is very similar to this famous react-query TypeScript guide:

// This is inside an `API.ts` file which contains every fetch calls for my endpoints.
// Those functions are called inside `useQuery`.
type CharactersResponse = {
  accountName: string;
  characters: Character[];
};

type Params = {
  queryKey: [string, { accountName?: string; token?: string }];
};

export const getCharacters = (params: Params): Promise<CharactersResponse> => {
  const [, { accountName, token }] = params.queryKey;

  if (!accountName || !token) {
    throw new Error('Unexpected undefined values, which are meant to be defined at this time of execution.');
  }

  return fetch(`/my-endpoint?accountName=${accountName}&token=${token}`, {
    method: 'GET',
  });
};

// SetupSession.tsx is a React component which consume react-query and the getCharacters API endpoint.
export const SetupSession: React.FC<SetupSession> = () => {
  // ...
  const { accountName, token } = useContext(UserContext);
  const fetchCharacters = useQuery(['fetchCharacters', { accountName, token }], getCharacters);
  //                                                                            ^^^^^^^^^^^^^
};

The following error appears under the getCharacters queryFn from SetupSession.tsx called in useQuery:

Argument of type '(params: Params) => Promise<CharactersResponse>' is not assignable to parameter of type 'QueryFunction<CharactersResponse, (string | { accountName: string; token: string; })[]>'.
  Types of parameters 'params' and 'context' are incompatible.
    Type 'QueryFunctionContext<(string | { accountName: string; token: string; })[], any>' is not assignable to type 'Params'.
      Types of property 'queryKey' are incompatible.
        Type '(string | { accountName: string; token: string; })[]' is not assignable to type '[string, { accountName?: string | undefined; token?: string | undefined; }]'.
          Target requires 2 element(s) but source may have fewer.ts(2345)

It looks like the issue is coming from react-query which changes the queryKey type from [string, { accountName?: string | undefined; token?: string | undefined; }] (which allows me to type-safe properly my queryKey array destructuring) to (string | { accountName: string; token: string; })[] (which doesn't give me proper type-safe array destructuring, cause values can be string | object).

The actual fix for me after spending a few hours on this, is to keep using the version 3.15.1.

I'm also posting this here as I'm not actually sure it's an issue with the library and I believe can be a real implementation issue when following the blog post mentioned earlier (which is the top 1 search hit for "react-query typescript").

Thanks!

[TkDodo]

sorry for your troubles. It compiles fine if you inline the function. You can then see that the inferred type is QueryFunctionContext, so if you use that to type it, it also works if you extract it to a function:

type Key = [string, { accountName?: string; token?: string }];

export const getCharacters = (
  params: QueryFunctionContext<Key>
): Promise<CharactersResponse> => { ... }

you can see that here: https://codesandbox.io/s/react-query-starting-point-forked-v7gc3?file=/src/App.tsx:268-370

[TotomInc]

Thanks for the answer. Indeed it works well with your fix using the QueryFunctionContext<Key>. 🙂