问题

I'm encountering a TypeScript error while using the getQueriesData function in Next.js 13 with React Query. Here's my code:

// 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>
  );
};

My queryClient.tsx:

// app/getQueryClient.jsx
import { QueryClient } from "@tanstack/react-query";
import { cache } from "react";

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

I'm trying to call the getQueriesData function on the queryClient instance, but I'm getting the following error:

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'.

// 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>
  );
};

// app/getQueryClient.jsx
import { QueryClient } from "@tanstack/react-query";
import { cache } from "react";

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

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

得分: 1

Here are the translated parts:

"@tanstack/react-query": "^4.29.12"

看看`getQueriesData()`方法的TS重载签名和实现签名：

```typescript
getQueriesData<TQueryFnData = unknown>(
  queryKey: QueryKey,
): [QueryKey, TQueryFnData | undefined][]
getQueriesData<TQueryFnData = unknown>(
  filters: QueryFilters,
): [QueryKey, TQueryFnData | undefined][]
getQueriesData<TQueryFnData = unknown>(
  queryKeyOrFilters: QueryKey | QueryFilters,
): [QueryKey, TQueryFnData | undefined][] {
  return this.getQueryCache()
    .findAll(queryKeyOrFilters)
    .map(({ queryKey, state }) => {
      const data = state.data as TQueryFnData | undefined
      return [queryKey, data]
    })
}

QueryKey类型如下，queryKey是只读数组。

export type QueryKey = readonly unknown[]

react-query使用isQueryKey函数检查queryKey参数，其实现如下：

export function isQueryKey(value: unknown): value is QueryKey {
  return Array.isArray(value)
}

你可以通过传递一个queryKey数组来匹配第一个重载签名：

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

const queryClient = new QueryClient();
queryClient.getQueriesData(['hydrate-users'])

<details>
<summary>英文:</summary>

*&quot;@tanstack/react-query&quot;: &quot;^4.29.12&quot;*

Let&#39;s see the TS overload signature and implementation signature of the `getQueriesData()` method:

```ts
getQueriesData&lt;TQueryFnData = unknown&gt;(
  queryKey: QueryKey,
): [QueryKey, TQueryFnData | undefined][]
getQueriesData&lt;TQueryFnData = unknown&gt;(
  filters: QueryFilters,
): [QueryKey, TQueryFnData | undefined][]
getQueriesData&lt;TQueryFnData = unknown&gt;(
  queryKeyOrFilters: QueryKey | QueryFilters,
): [QueryKey, TQueryFnData | undefined][] {
  return this.getQueryCache()
    .findAll(queryKeyOrFilters)
    .map(({ queryKey, state }) =&gt; {
      const data = state.data as TQueryFnData | undefined
      return [queryKey, data]
    })
}

And the QueryKey type, as you can see, the queryKey is a readonly array.

export type QueryKey = readonly unknown[]

react-query check the queryKey argument use isQueryKey function, the implementation:

export function isQueryKey(value: unknown): value is QueryKey {
  return Array.isArray(value)
}

You can match the first overload signature by passing an array of queryKey

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

const queryClient = new QueryClient();
queryClient.getQueriesData(['hydrate-users'])