我在使用Next.js 13中的getQueriesData函数与React Query时遇到了TypeScript错误。下面是我的代码:
// app/products.tsx
import { getQueryClient } from "@/app/providers/getQueryClient";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import React from "react";
export interface ProductResponse {
// Interface definition...
}
// Function definition...
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>
{/* Rest of the code */}
</div>
);
};
我的queryClient.tsx:
// app/getQueryClient.jsx
import { QueryClient } from "@tanstack/react-query";
import { cache } from "react";
const getQueryClient = cache(() => new QueryClient());
export default getQueryClient;
我尝试在queryClient示例上调用getQueryesData函数,但收到以下错误:
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'.
1条答案
按热度按时间rjee0c151#
让我们看看
getQueriesData()
方法的TS重载签名和实现签名:而
QueryKey
类型,正如你所看到的,queryKey
是一个只读数组。react-query
检查queryKey
参数使用isQueryKey
函数,实现:可以通过传递
queryKey
数组来匹配第一个重载签名