reactjs - Finnes det noen måte å transformere spørringsdata og kartlegge i henhold til den typen i react-query v4?

Jeg prøver å transformere spørringsdata fra API-respons. Mer spesifikt ønsker jeg å legge til to ekstra egenskaper. Det er derfor jeg bruker select-konfigurasjon i useQuery-hooken slik:

Men i dette tilfellet fikk jeg ikke forslag om to ekstra egenskaper. Derfor har jeg lagt til en annen modell og bruker den med useQuery-hooken slik: Men den kaster en feil.

Jeg sitter fast med dette.

rediger på codesandbox

Svar #1

Prøv dette, problemet er at den første generiske typeparameteren til useQuery ikke er typen på de returnerte dataene. Det er queryFn-returtypen. Du kan sette ModifiedProduct[] til den tredje generiske typeparameteren, eller la koden inferere det selv.

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

Relaterte artikler