NSwag и react-query — автоматическая генерация hooks для вашего API.

Про использование NSwag и автогенерацию API-клиентов я уже писал несколько раз, у нас в МЦЦ это давно внедрено и используется (чаще всего мы генерируем axios-клиентов).

Однако в последнее время я всё чаще использую react-query — это очень удобная библиотека для кэширования и управления http-запросами. Она не заменяет axios/fetch и им подобные, а работает вместе с ними. Типичный сценарий использования react-query выглядит примерно так:

// объявление функции API-вызова. У нас обычно такие функции уже автогенерируются с помощью nswag
const getPostById = async (key, id) => {
  const { data } = await axios.get(
    `https://jsonplaceholder.typicode.com/posts/${id}`
  );
  return data;
};

// оборачивание этой функции в hook с использованием react-query
function useGetPostById(postId) {
  return useQuery(["post", postId], getPostById, {
    enabled: postId,
  });
}

const Post: React.FC<{ postId: number }> = (props) => {
  // вызов хука внури компонента
  const { status, data, error, isFetching } = useGetPostById(props.postId);
 // ...
}

Я не хочу описывать все плюсы работы с библиотекой (в документации написано намного лучше), но просто не могу не упомянуть про очень удобное кэширование, «магическое» обновление кэша, дедубликацию запросов (чтобы ушел только один запрос, когда вам в двух разных местах нужны одинаковые данные) и даже про работу с Suspense.

Вот про все эти плюсы говорить не буду, а расскажу об одном минусе. Код подобный вышеописанному приходится писать руками для каждого GET-запроса, и если API-вызовы у нас уже сгенерированы, то хук (а чаще еще и функцию-ключ к запросу ["post", postId]) приходится писать руками.

Довольно быстро меня это утомило, и в тот же момент пришла мысль — если мы автогенерируем axios-клиентов, то почему бы не автосгенерировать и это тоже?

Сказано — сделано, nswag основан на гибкой системе liquid-шаблонов, которые с легкостью можно переопределить. Так и родился на свет набор шаблонов nswag-react-query.

Использовать его очень просто. Добавляем в react-проект:

yarn add nswag-react-query nswag react-query

и вызываем автогенерацию (предварительно изменив URL swagger-описания и путь к результирующему файлу)

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

После этого хуки, подобные вышеописанным, оказываются авотматически сгенерированными и готовыми к использованию!

Смотрите пример, внедряйте у себя, и не тратьте время на написание рутинного кода!