SWR

Start by providing an OpenAPI specification and an Orval config file. To use SWR, define the client in the Orval config to be swr.

Example with SWR

1module.exports = {
2  petstore: {
3    output: {
4      mode: 'tags-split',
5      target: 'src/petstore.ts',
6      schemas: 'src/model',
7      client: 'swr',
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 SWR client will generate an implementation file with one custom hook per path in the OpenAPI Specification.

For exmaple, 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 getShowPetByIdKey = (petId: string) => [`/pets/${petId}`];
9Re;
10
11export const useShowPetById = <TError = Error>(
12  petId: string,
13  options?: {
14    swr?: SWRConfiguration<AsyncReturnType<typeof showPetById>, TError> & {
15      swrKey?: Key;
16      enabled?: boolean;
17    };
18    axios?: AxiosRequestConfig;
19  },
20) => {
21  const { swr: swrOptions, axios: axiosOptions } = options ?? {};
22
23  const isEnabled = swrOptions?.enabled !== false && !!petId;
24  const swrKey =
25    swrOptions?.swrKey ?? (() => (isEnabled ? getShowPetByIdKey(petId) : null));
26  const swrFn = () => showPetById(petId, axiosOptions);
27
28  const query = useSwr<AsyncReturnType<typeof swrFn>, TError>(
29    swrKey,
30    swrFn,
31    swrOptions,
32  );
33
34  return {
35    swrKey,
36    ...query,
37  };
38};

Go here for a full example