有沒有辦法根據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;
    }
  });