Про использование 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
После этого хуки, подобные вышеописанным, оказываются авотматически сгенерированными и готовыми к использованию!
Смотрите пример, внедряйте у себя, и не тратьте время на написание рутинного кода!
