How to add the error type of useQueries in TypeScript?

Question

I'm using react-query's useQueries to define a custom hook useArtists:

type SuccessResponse = {
  artist: {
    name: string
  }
};


const fetchArtist = async (artistId: string): Promise<SuccessResponse> => {
  const response = await axios.get(`/artists/${artistId}`);

  if (response.status !== 200) {
    throw response.data.error ?? "Unknown error";
  }

  return response.data;
};


export const useArtists = (artistIds: string[]) => {
  return useQueries({
    queries: artistIds.map((artistId) => {
      return {
        queryKey: ["artists", artistId],
        queryFn: () => fetchArtist(artistId),
      };
    }),
  });
};

The inferred return type of useArtists is UseQueryResult<SuccessResponse, unknown>[].

How could I add the return type of the error, which is string, so that the return type becomes UseQueryResult<SuccessResponse, string>[]?

I was hoping useQueries might let you specify the success return type as generics but it doesn't appear as though. I tried to get this running on stackblitz without success: stackblitz.com/edit/react-ts-yacnui?file=App.tsx — Robert Rendell
– Robert Rendell, Commented Oct 5, 2022 at 11:14

TkDodo · Accepted Answer · 2022-10-07 08:30:04Z

4

You can provide types to useQueries by annotating queries you're passing to useQueries. In your example, this can be done by passing a generic to the .map itself:

type Artist = { name: string }

export const useArtists = (artistIds: string[]) => {
  return useQueries({
    queries: artistIds.map<UseQueryOptions<Artist[], Error>>((artistId) => {
      return {
        queryKey: ["artists", artistId],
        queryFn: () => fetchArtist(artistId),
      };
    }),
  });
};

UseQueryOptions can be imported from @tanstack/react-query, and it's the

Here's a working TypeScript Playground.

answered Oct 7, 2022 at 8:30

TkDodo

30.4k5 gold badges85 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to add the error type of useQueries in TypeScript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related