Is there a way to convert query data and mapping based on types in react-query v4?

Question

I'm trying to convert query data from an API response. More specifically, I want to add two additional properties. That's why I'm using select configuration in useQuery hook like below: But in this case I don't get suggestion for extra two properties. That's why I added another model and used it with useQuery hook like below: But it gives error. I'm stuck on this problem. Edit on codesandbox

P粉262113569 · Answer

Try this, the problem is that the first generic type parameter of useQuery is not the returned data type. It is the queryFn return type. You can put ModifiedProduct[] in the third generic type parameter or somewhere the code infers itself.

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