使用 React Query TypeScript 获取数据

Question

在使用 TypeScript 进行 React 查询中，我有一个 getRecommendations 钩子，我只想发送最新的记录（可能还有另一个用于监视列表等的钩子）。我在 queryKey 中收到错误消息：

“没有重载与此调用匹配。上次重载出现以下错误。类型为 '{ queryKey: string[]; queryFn: () => Promise<FetchResponse |Recommendations[]>; }' 的参数不可分配给类型参数'QueryKey'。对象文字只能指定已知属性，并且 'queryKey' 不存在于类型 'readonlyknown[]'.ts(2769) 中”

import { useQuery } from "@tanstack/react-query";
import apiTest from "../../Services/api-test";

export interface Recommendations {
  title_description: string;
  title_id: number;
  title_name: string;
}

export interface FetchResponse<T> {
  latestrecs: T[];
  watchlist: T[];
}

const useRecommendations = () =>

  useQuery<FetchResponse<Recommendations>, Error>({
    queryKey: ['recommend'],
    queryFn: () =>
      apiTest.get<FetchResponse<Recommendations>>("/titles")
        .then((res) => res.data.latestrecs),
  })


export default useRecommendations;

我有一个 JSON 数据示例，如下所示：（每个数据中会有更多标题）

{
    "latestrecs": [
        {
            "genre_name": "Sports",
            "title_description": "From the All-England Lawn Tennis and Croquet Club in Wimbledon, England.",
            "title_id": 22996,
            "title_name": "Classic Wimbledon",
            "title_release_year": 2018
        }
    ],
    "watchlist": [
        {
            "genre_name": "Sports",
            "title_description": "From the All-England Lawn Tennis and Croquet Club in Wimbledon, England.",
            "title_id": 22996,
            "title_name": "WL Classic Wimbledon",
            "title_release_year": 2018
        }
    ]
}

我正在尝试使用 useRecommendation 钩子将latestrecs 数组发送到映射函数。我在 map((title) 下收到错误，提示“属性‘map’在‘NonNullable’类型上不存在”

{recommendations?.map((title) => (
          <ul key={title.title_id} style={{ margin: 0, padding: 0 }}>
            <div className={styles.title} onClick={() => navigate("/title")}>
              {title.title_name}
            </div>
          </ul>
        ))}

Answer 1

回复有点晚，但我多次遇到这个问题，原因是我使用的泛型与queryFn.

这个例子会导致错误：

const duckFunc = async (): Duck[] => {
   return ducks;
}
useQuery<Goose[]>({
  queryKey: ["ducks"],
  queryFn: duckFunc,
})

解决方法是将泛型更改为正确的类型或使用返回 geese 的 queryFn。