nswag-react-query

nswag-react-query

This projects autogenerates react-query hooks based on Swagger API definitions. So, given that you have a petstore-like API definition, you could autogenerate a list of react-query hooks, to call GET methods from the API (queries). Mutations (POST/PUT/PATCH/DELETE methods) are not yet supported.

How to add

Add this library to your project as a dev-dependency. You'll also need to add NSwag and react-query (which you probably already have if you are interested in this library).

yarn add nswag-react-query nswag react-query

Then to create/update your autogenerated hooks you need to call the following script (adjusting the URL and output path)

yarn nswag-react-query /input:https://petstore.swagger.io/v2/swagger.json /output:src/api/axios-client.ts /template:Axios

This will generate API clients based on Axios. If you prefer fetch, just use it as a template (mind the last parameter)

yarn nswag-react-query /input:https://petstore.swagger.io/v2/swagger.json /output:src/api/axios-client.ts /template:Fetch

All parameters are passed to NSwag, you could read about them in NSwag documentation. Personally I tend to use it with few additional parameters:

yarn nswag-react-query /input:https://petstore.swagger.io/v2/swagger.json /output:src/api/axios-client.ts /template:Axios /serviceHost:. /generateConstructorInterface:true /markOptionalProperties:true /generateOptionalParameters:true /nullValue:undefined

How to use

You could check a pet-client example, which shows the list of pets. It's a standard react-query setup, to query some pet data you just need to write:

  const petsQuery = AxiosQuery.ClientQuery.useFindPetsByStatusQuery([
    Status.Available,
    Status.Pending,
    Status.Sold,
  ]);

It will call useQuery passing a function to get data using Axios from findByStatus as a queryFn. I really suggest to check the autogenerated sources, if you are interested in details.

The only thing that differs from usual, is the call to initialize http clients (which you might not need, if API is on the same URL as the SPA, and default instance of axios/fetch are ok for you).

In case of Axios you need to add the following (next to QueryClient initialization):

AxiosQuery.setDefaultConstructorParametersProvider(() => [
  'https://petstore.swagger.io/v2', // base URL
  axios, // axios instance
]);

Passed function should return parameters that will be passed to constructor of API clients.

In case of axios clients, parameters are [baseUrl?: string, instance?: AxiosInstance].

In case of fetch - [baseUrl?: string, http?: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> }].

How to configure queries

You could define additional UseQueryOptions for each query by setting *queryName*DefaultOptions

AxiosQuery.ClientQuery.findPetsByStatusDefaultOptions = {
  cacheTime: 10000
}

How does it work

Under the cover it's just 2 template files for NSwag and a small script to easily use them.

Contributions and support

Issues and Pull Requests are welcome.

For any kind of private consulting or support you could contact Artur Drobinskiy directly via email.