Use with React Query

To use openapi-client-axios in a declarative way in the frontend, we recommend using TanStack Query (previously known as React Query) together with type safe clients created with openapi-stack.

Example with React Query

First, let's set up our type safe API client:

tip

Use the openapicmd typegen command to generate the openapi.d.ts type file for your API.

note

For optimal performance, it's recommended to pass the definition as a JS object instead or fetching it from a URL in runtime.

// api.ts
import { OpenAPIClientAxios } from 'openapi-client-axios';
import type { Client } from './openapi.d.ts';

const api = new OpenAPIClientAxios({
  definition: 'https://example.openapistack.co/openapi.json',
});

export const getApiClient = async () => {
  const client = await api.getClient<Client>();

  // add auth token
  client.default.headers['authorization'] = `Bearer ${API_TOKEN}`;

  return client;
}

Now we are ready to use our type safe client with React Query:

// PetView.tsx
import { useQuery } from 'react-query';
import { getApiClient } from './api';
import Loader from './Loader';

export const PetView = (props: { petId: string }) => {
  const petQuery = useQuery(
    ['getPetById', props.petId],
    () => getApiClient()
      .then(client => client.getPetById(props.petId))
      .then(res => res.data),
    { enabled: !!props.petId },
  );

  const pet = petQuery.data; // type Pet is inferred from openapi.d.ts

  return (
    <div>
      {petQuery.fetching && <Loader />} 

      {petQuery.data && (/* TODO: show pet information */)}
    </div>
  )
}