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 = (petId: string, version: number = 1) => {
2   return axios.get<Pet>(`/v${version}/pets/${petId}`);
3 };
4 
5 export const getShowPetByIdQueryKey = (petId: string, version: number = 1) => [
6   `/v${version}/pets/${petId}`,
7 ];
8 
9 export const useShowPetById = <Error = unknown>(
10   petId: string,
11   version: number = 1,
12   queryConfig?: UseQueryOptions<AsyncReturnType<typeof showPetById>, Error>,
13 ) => {
14   const queryKey = getShowPetByIdQueryKey(petId, version);
15 
16   const query = useQuery<AsyncReturnType<typeof showPetById>, Error>(
17     queryKey,
18     () => showPetById(petId, version),
19     { enabled: !!(version && petId), ...queryConfig },
20   );
21 
22   return {
23     queryKey,
24     ...query,
25   };
26 };

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 config props.

1 module.exports = {
2   petstore: {
3     output: {
4       ...
5       override: {
6         query: {
7           useQuery: true,
8           useInfinite: true,
9           useInfiniteQueryParam: 'nextId',
10           config: {
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 };

How to set a backend url

Mutator

You can add a mutator function to your config and setup a custom instance of your prefered HTTP client.

1 module.exports = {
2   petstore: {
3     output: {
4       ...
5       override: {
6         mutator: {
7           path: './api/mutator/custom-instance.ts',
8           name: 'customInstance',
9         },
10       },
11     }
12     ...
13   },
14 };

1 // custom-instance.ts
2 
3 import Axios, { AxiosRequestConfig } from 'axios';
4 
5 export const AXIOS_INSTANCE = Axios.create({ baseURL: '' });
6 
7 export const customInstance = <T>(config: AxiosRequestConfig): Promise<T> => {
8   const source = Axios.CancelToken.source();
9   const promise = AXIOS_INSTANCE({ ...config, cancelToken: source.token }).then(
10     ({ data }) => data,
11   );
12 
13   // @ts-ignore
14   promise.cancel = () => {
15     source.cancel('Query was cancelled by React Query');
16   };
17 
18   return promise;
19 };

Alternative

You can add an interceptor to set automatically your url

1 axios.interceptors.request.use((config) => {
2   return {
3     ...config,
4     baseURL: '<BACKEND URL>',
5   };
6 });

How to add headers

Like for the backend url you should use an interceptor to set your header automatically.

You can use a context to add automatically an authorization for example.

1 const AuthProvider = ({ children, initialState = null }: AuthProviderProps) => {
2   // it's a quick demo with useState but you can also have a more complexe state with a useReducer
3   const [token, setToken] = useState(initialState);
4 
5   useEffect(() => {
6     const interceptorId = axios.interceptors.request.use((config) => {
7       return {
8         ...config,
9         headers: token
10           ? {
11               ...config.headers,
12               Authorization: `Bearer ${token}`,
13             }
14           : config.headers,
15       };
16     });
17 
18     return () => {
19       axios.interceptors.request.eject(interceptorId);
20     };
21   }, [token]);
22 
23   return (
24     <AuthContext.Provider value={token}>
25       <AuthDispatchContext.Provider value={setToken}>
26         {children}
27       </AuthDispatchContext.Provider>
28     </AuthContext.Provider>
29   );
30 };

Checkout here the full example