React query

You should have an OpenApi specification and an Orval config where you define the mode as react-query.

Example with React query

1 module.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 };

Checkout the orval config reference to see all available options.

The React query model will generate an implementation file with one custom hook per path in your OpenApi Specification.

Like the following example from this swagger:

1 export const showPetById = (
2   petId: string,
3   options?: AxiosRequestConfig,
4 ): Promise<AxiosResponse<Pet>> => {
5   return axios.get(`/pets/${petId}`, options);
6 };
7 
8 export const getShowPetByIdQueryKey = (petId: string) => [`/pets/${petId}`];
9 
10 export 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 use other query

With the following example Orval will generate a useQuery and useInfinteQuery with a nextId queryparam. You can also override the config for each one with the options props.

1 module.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 you can also override directly to an operation or a tag

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

Checkout here the full example