Gibt es eine Möglichkeit, Abfragedaten und Zuordnungen basierend auf Typen in React-Query v4 zu konvertieren?

Question

Ich versuche, Abfragedaten aus einer API-Antwort umzuwandeln. Genauer gesagt möchte ich zwei zusätzliche Eigenschaften hinzufügen. Deshalb habe ich es in useQuery 挂钩中使用 select so konfiguriert: Aber in diesem Fall bekomme ich den Vorschlag für die beiden zusätzlichen Eigenschaften nicht. Deshalb habe ich ein weiteres Modell hinzugefügt und es mit dem useQuery-Haken so verwendet: Aber es wird ein Fehler angezeigt.

Ich stecke bei diesem Problem fest.

Auf Codesandbox bearbeiten

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