什么是反应查询“queryKey”打字稿类型

Question

我正在使用带有打字稿的反应查询。赋予函数的参数的类型是什么？

导出 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_HERE”处放置什么类型？

编辑：根据建议，我给出了类型

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

到函数。我在函数上不再收到错误，但在调用该函数的 useQuery 上收到错误，即使类型是正确的（我认为）。

这些是错误：

(别名) const validateToken: QueryFunction<boolean, [string, string | 空 | undefined]> import validateToken 没有重载与此调用匹配。重载 1 of 9, '(queryKey: QueryKey, queryFn: QueryFunction<boolean, QueryKey>, options?: (Omit<UseQueryOptions<boolean,unknown, boolean, QueryKey>, "queryKey" | ... 1 more ... | “queryFn"> & { ...; }) | undefined): UseQueryResult<...>'，给出以下错误。类型为 'QueryFunction<boolean, [string, string | 空 | undefined]>' 不可分配给类型为“QueryFunction<boolean, QueryKey>”的参数。类型“QueryKey”是“只读”，不能分配给可变类型“[string, string |” 空 | 不明确的]'。重载 2 of 9, '(queryKey: QueryKey, queryFn: QueryFunction<boolean, QueryKey>, options?: (Omit<UseQueryOptions<boolean,unknown, boolean, QueryKey>, "queryKey" | ... 1 更多 ... | “queryFn"> & { ...; }) | undefined): DefinedUseQueryResult<...>'，给出以下错误。类型为 'QueryFunction<boolean, [string, string | 空 | undefined]>' 不可分配给类型为“QueryFunction<boolean, QueryKey>”的参数。重载 3 of 9, '(queryKey: QueryKey, queryFn: QueryFunction<boolean, QueryKey>, options?: Omit<UseQueryOptions<boolean,unknown, boolean, QueryKey>, "queryKey" | "queryFn"> | undefined): UseQueryResult< ...>'，给出了以下错误。类型为 'QueryFunction<boolean, [string, string | 空 | undefined]>' 不可分配给类型为“QueryFunction<boolean, QueryKey>”的参数。ts(2769)

Answer 1

您正在寻找的类型是QueryFunctionContext，它是从react-query导出的：

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

您可以在这个打字稿游乐场中看到一个工作版本

Answer 2

您应该使用QueryFunction库中的类型：

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

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

第一个通用类型QueryFunction是您的返回数据类型，第二个应该描述 queryKey，在这种情况下您['userId', token]基本上是[string, string]