This package has been deprecated

    Author message:

    WARNING: This project has been renamed to react-query-swagger. Install react-query-swagger instead.

    nswag-react-query

    13.9.16 • Public • Published

    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.

    Install

    npm i nswag-react-query

    DownloadsWeekly Downloads

    21

    Version

    13.9.16

    License

    MIT

    Unpacked Size

    24.6 kB

    Total Files

    14

    Last publish

    Collaborators

    • shaddix