Next.js 13中调用getQueriesData出现TypeScript重载匹配错误

以下是相关代码：

app/products.tsx #

import { getQueryClient } from "@/app/providers/getQueryClient";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import React from "react";

export interface ProductResponse {
  // 接口定义...
}

// 函数定义...

export const ProductList = () => {
  const queryClient = getQueryClient();
  const { data, isLoading, isFetching, error } = useQuery({
    queryKey: ["hydrate-users"],
    queryFn: () => getProducts(),
  });

  return (
    <div>
      <button onClick={() => {
          queryClient.getQueriesData("hydrate-users");
      }}>Revalidate</button>
      {/* 剩余代码 */}
    </div>
  );
};

app/getQueryClient.jsx #

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

const getQueryClient = cache(() => new QueryClient());
export default getQueryClient;

调用queryClient.getQueriesData("hydrate-users")时出现以下TypeScript错误：

No overload matches this call.
Overload 1 of 2, '(queryKey: QueryKey): [QueryKey, unknown][]', gave the following error.
Argument of type 'string' is not assignable to parameter of type 'QueryKey'.
Overload 2 of 2, '(filters: QueryFilters): [QueryKey, unknown][]', gave the following error.
Type '"hydrate-users"' has no properties in common with type 'QueryFilters'.

解决方案 #

问题核心是getQueriesData的参数格式不符合React Query的类型要求：

• React Query的QueryKey类型规定为数组格式，而非单纯字符串
• 你在useQuery中定义的queryKey是["hydrate-users"]，调用getQueriesData时需保持一致格式

修改按钮点击事件代码：

<button onClick={() => {
    // 将字符串改为数组格式的queryKey
    queryClient.getQueriesData(["hydrate-users"]);
}}>Revalidate</button>

如果需要模糊匹配多个相关查询，可使用QueryFilters对象：

// 匹配所有以"hydrate-users"为前缀的查询
queryClient.getQueriesData({ queryKey: ["hydrate-users"] });

另外，建议给getQueriesData添加类型声明，让返回值类型更明确：

const queries = queryClient.getQueriesData<[string, ProductResponse[]]>(["hydrate-users"]);

内容的提问来源于stack exchange，提问作者White Coal