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

Question

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

P粉262113569 · Answer

试试这个，问题是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({
    queryKey: ["fetch-products"],
    queryFn: fetchProducts,
    select: (data) => {
      const items = data.map(
        (prod): ModifiedProduct => ({
          ...prod,
          dateOfAdd: new Date(),
          dateOfUpdate: new Date()
        })
      );
      return items;
    }
  });