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

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

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

TomskDotNet #6 — первый пост-коронавирусный митап и выход .NET 5!

Наконец-то! После почти года перерыва митапы потихоньку возвращаются!

22 октября мы провели очередной — и очень неплохой — митап (фото и видео — традиционно на сайте). Лично я был очень удивлен такому большому количеству смельчаков, не побоявшихся прийти к нам в оффлайн. Следуя коронавирусным традициям, в этот раз у нас была и онлайн часть, и даже одному из «удаленных» участников достался сертификат от Jetbrains — наш приятный подарок за активность и хорошие вопросы.

У меня на этом митапе был небольшой вступительный доклад про грядущий выход .NET 5, а сейчас, спустя месяц, я могу поделиться и собственным опытом переезда на новую версию с 3.1. Мои небольшие пет-проджекты и чуть большая open-source библиотека авторизации переехали за пару вечеров без каких-либо проблем. По сравнению с миграцией 2.2 -> 3.0 (которая, пожалуй, заняла недели 2-3) — это просто сказка. Единственный breaking-change с которым мне пришлось столкнуться — это небольшое изменение в контексте авторизации. В остальном обновление свелось к чистке Startup.cs и изменению версий зависимостей в .csproj. Идеально! :)

Так что если задумываетесь над обновлением — не задумывайтесь :) В сети куча статей про 20% рост производительности, так что причин откладывать нет ну вообще никаких (ну, разве что помните, что .NET 5 — не LTS и обновляться до .NET 6 придется оперативно после его выхода).

Ну и смотрите видеозапись доклада, если интересно :)