React query

You should have an OpenAPI specification and an Orval config where you define the mode as 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};

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:

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 use other query

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

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 you can also override directly to an operation or a 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};

Checkout here the full example