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

import { defineConfig } from 'orval';


export default defineConfig({
  petstore: {
    output: {
      mode: 'tags-split',
      target: 'src/petstore.ts',
      schemas: 'src/model',
      client: 'react-query',
      mock: true,
    },
    input: {
      target: './petstore.yaml',
    },
  },
});

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:

export const showPetById = (
  petId: string,
  options?: AxiosRequestConfig,
): Promise<AxiosResponse<Pet>> => {
  return axios.get(`/pets/${petId}`, options);
};


export const getShowPetByIdQueryKey = (petId: string) => [`/pets/${petId}`];


export const useShowPetById = <
  TData = AsyncReturnType<typeof showPetById>,
  TError = Error,
>(
  petId: string,
  options?: {
    query?: UseQueryOptions<AsyncReturnType<typeof showPetById>, TError, TData>;
    axios?: AxiosRequestConfig;
  },
) => {
  const { query: queryOptions, axios: axiosOptions } = options ?? {};


  const queryKey = queryOptions?.queryKey ?? getShowPetByIdQueryKey(petId);
  const queryFn = () => showPetById(petId, axiosOptions);


  const query = useQuery<AsyncReturnType<typeof queryFn>, TError, TData>(
    queryKey,
    queryFn,
    { enabled: !!petId, ...queryOptions },
  );


  return {
    queryKey,
    ...query,
  };
};

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.

import { defineConfig } from 'orval';


export default defineConfig({
  petstore: {
    output: {
      ...
      override: {
        query: {
          useQuery: true,
          useInfinite: true,
          useInfiniteQueryParam: 'nextId',
          options: {
            staleTime: 10000,
          },
        },
      },
    },
    ...
  },
});

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

import { defineConfig } from 'orval';


export default defineConfig({
  petstore: {
    output: {
      ...
      override: {
        operations: {
          listPets: {
            query: {
              ...
            },
          }
        },
      },
    }
    ...
  },
});

Go here for a full example

Edit this page on GitHub
Was this page helpful?