What is the react query "queryKey" typescript type-CodePudding

I'm using react query with typescript. What is the type of the arguments given to the function?

export const useIsTokenValid = () => { const { data: token } = useQuery<string | null>(['token'], getToken, { refetchOnMount: false, }); return useQuery(['isTokenValid', token], validateToken, { refetchOnMount: false, enabled: typeof token !== 'undefined', }); };

export const validateToken = async ({ queryKey }: WHAT_TYPE_SHOULD_I_PUT_HERE) => {
  console.log('validating token');
  const [_, token] = queryKey;
  if (token) {
    const res = await axios.get<boolean>(BACKEND_URL   '/', {
      headers: {
        Authorization: token,
      },
    });
    return res.data;
  } else {
    return false;
  }
};

What type should I put where there is "WHAT_TYPE_SHOULD_I_PUT_HERE"?

Edit: As suggested, I gave the type

QueryFunction<
  boolean,
  [string, string | null | undefined]
>

to the function. I don't get errors anymore on the function, but I get errors on the useQuery where I call that function, even though the types are correct (I think).

Theese are the errors:

(alias) const validateToken: QueryFunction<boolean, [string, string | null | undefined]> import validateToken No overload matches this call. Overload 1 of 9, '(queryKey: QueryKey, queryFn: QueryFunction<boolean, QueryKey>, options?: (Omit<UseQueryOptions<boolean, unknown, boolean, QueryKey>, "queryKey" | ... 1 more ... | "queryFn"> & { ...; }) | undefined): UseQueryResult<...>', gave the following error. Argument of type 'QueryFunction<boolean, [string, string | null | undefined]>' is not assignable to parameter of type 'QueryFunction<boolean, QueryKey>'. The type 'QueryKey' is 'readonly' and cannot be assigned to the mutable type '[string, string | null | undefined]'. Overload 2 of 9, '(queryKey: QueryKey, queryFn: QueryFunction<boolean, QueryKey>, options?: (Omit<UseQueryOptions<boolean, unknown, boolean, QueryKey>, "queryKey" | ... 1 more ... | "queryFn"> & { ...; }) | undefined): DefinedUseQueryResult<...>', gave the following error. Argument of type 'QueryFunction<boolean, [string, string | null | undefined]>' is not assignable to parameter of type 'QueryFunction<boolean, QueryKey>'. Overload 3 of 9, '(queryKey: QueryKey, queryFn: QueryFunction<boolean, QueryKey>, options?: Omit<UseQueryOptions<boolean, unknown, boolean, QueryKey>, "queryKey" | "queryFn"> | undefined): UseQueryResult<...>', gave the following error. Argument of type 'QueryFunction<boolean, [string, string | null | undefined]>' is not assignable to parameter of type 'QueryFunction<boolean, QueryKey>'.ts(2769)

CodePudding user response：

The type you are looking for is QueryFunctionContext, and it's exported from react-query:

import { QueryFunctionContext } from '@tanstack/react-query';
export const validateToken = async ({ queryKey }: QueryFunctionContext<[string, string | null | undefined]>) => {

You can see a working version in this typescript playground

CodePudding user response：

You should use QueryFunction type from the library:

import { QueryFunction } from "@tanstack/react-query";

export const validateToken: QueryFunction<number | undefined, [string, string]> = async ({queryKey}) => {
  // ...
};

First generic type of QueryFunction is your return data type, and second one should describe the queryKey, in this case you have ['userId', token] which is basically [string, string]