有没有办法根据react-query v4中的类型转换查询数据和映射？

Question

我正在尝试转换来自 API 响应的查询数据。更具体地说，我想添加两个额外的属性。这就是为什么我在 useQuery 挂钩中使用 select 配置，如下所示： 但在这种情况下，我没有得到额外两个属性的建议。这就是为什么我添加了另一个模型并将其与 useQuery 挂钩一起使用，如下所示： 但它出现错误。

我被这个问题困住了。

在codesandbox上编辑

Answer 1

试试这个，问题是useQuery的第一个泛型类型参数不是返回的数据类型。它是 queryFn 返回类型。您可以将 ModifiedProduct[] 放入第三个泛型类型参数或代码自行推断的位置。

const { data, isLoading } = useQuery({
    queryKey: ["fetch-products"],
    queryFn: fetchProducts,
    select: (data) => {
      const items = data.map(
        (prod): ModifiedProduct => ({
          ...prod,
          dateOfAdd: new Date(),
          dateOfUpdate: new Date()
        })
      );
      return items;
    }
  });

// this should also work
  const { data, isLoading } = useQuery<Product[], unknown, ModifiedProduct[]>({
    queryKey: ["fetch-products"],
    queryFn: fetchProducts,
    select: (data) => {
      const items = data.map(
        (prod): ModifiedProduct => ({
          ...prod,
          dateOfAdd: new Date(),
          dateOfUpdate: new Date()
        })
      );
      return items;
    }
  });