Existe-t-il un moyen de convertir les données de requête et le mappage en fonction des types dans React-Query v4 ?

Question

J'essaie de transformer les données de requête à partir d'une réponse API. Plus précisément, je souhaite ajouter deux propriétés supplémentaires. C'est pourquoi je l'ai configuré en useQuery 挂钩中使用 select comme ceci : Mais dans ce cas, je ne reçois pas de suggestion pour les deux propriétés supplémentaires. C'est pourquoi j'ai ajouté un autre modèle et l'ai utilisé avec le crochet useQuery comme ceci : Mais il y a une erreur.

Je suis bloqué sur ce problème.

Modifier sur codesandbox

Answer 1

Essayez ceci, le problème est useQuery的第一个泛型类型参数不是返回的数据类型。它是 queryFn 返回类型。您可以将 ModifiedProduct[] d'insérer le troisième paramètre de type générique ou là où le code le déduit lui-même.

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