React Query

Start by providing an OpenAPI specification and an Orval config file. To use React Query, define the mode in the Orval config to be react-query.

Example with React Query

1module.exports = {
2  petstore: {
3    output: {
4      mode: 'tags-split',
5      target: 'src/petstore.ts',
6      schemas: 'src/model',
7      client: 'react-query',
8      mock: true,
9    },
10    input: {
11      target: './petstore.yaml',
12    },
13  },
14};

Navigate to the Orval config reference to see all available options.

The React Query mode will generate an implementation file with one custom hook per path in the OpenAPI Specification.

For example, this Swagger specification will generate the following hooks:

1export const showPetById = (
2  petId: string,
3  options?: AxiosRequestConfig,
4): Promise<AxiosResponse<Pet>> => {
5  return axios.get(`/pets/${petId}`, options);
6};
7
8export const getShowPetByIdQueryKey = (petId: string) => [`/pets/${petId}`];
9
10export const useShowPetById = <
11  TData = AsyncReturnType<typeof showPetById>,
12  TError = Error,
13>(
14  petId: string,
15  options?: {
16    query?: UseQueryOptions<AsyncReturnType<typeof showPetById>, TError, TData>;
17    axios?: AxiosRequestConfig;
18  },
19) => {
20  const { query: queryOptions, axios: axiosOptions } = options ?? {};
21
22  const queryKey = queryOptions?.queryKey ?? getShowPetByIdQueryKey(petId);
23  const queryFn = () => showPetById(petId, axiosOptions);
24
25  const query = useQuery<AsyncReturnType<typeof queryFn>, TError, TData>(
26    queryKey,
27    queryFn,
28    { enabled: !!petId, ...queryOptions },
29  );
30
31  return {
32    queryKey,
33    ...query,
34  };
35};

How to Use Other Queries

Given the following configuration, Orval will generate useQuery and useInfiniteQuery hooks with a nextId query parameter. It is also possible to override the config for every hook with the options field.

1module.exports = {
2  petstore: {
3    output: {
4      ...
5      override: {
6        query: {
7          useQuery: true,
8          useInfinite: true,
9          useInfiniteQueryParam: 'nextId',
10          options: {
11            staleTime: 10000,
12          },
13        },
14      },
15    },
16    ...
17  },
18};

If needed, it is also possible to override the query options for a single operation or tag:

1module.exports = {
2  petstore: {
3    output: {
4      ...
5      override: {
6        operations: {
7          listPets: {
8            query: {
9              ...
10            },
11          }
12        },
13      },
14    }
15    ...
16  },
17};

Go here for a full example