Оптимизация без AI: как я автоматизировал API-ручки и типы

Вот важная новость с фронта ИИ: grmnche 3 минуты назад Оптимизация без AI: как я автоматизировал API-ручки и типы Средний 4 мин 27 TypeScript * Проектирование API * Программирование * Веб-разработка * Open source * Кейс Из песочницы На прошлой неделе я снова потратил полдня на то, чтобы понять, почему фронт падает после обновления бэка. Локально работало, а на стейдже ошибка. Оказалось, бэкендер переименовал поле в ответе, но не обновил документацию и не предупредил команду.

Я узнал об этом только когда код упал на стейдже - вручную править ручку пришлось уже постфактум, разбираясь с ошибкой. С этим надо было что-то делать. Решение: генерируемый API-клиентЯ начал использовать генерируемый API-клиент.

Технические детали

По сути, это набор ручек (функций для запросов) и типов к ним, которые генерируются на основе открытого API - yaml-файла сваггера. Теперь на фронте я просто ввожу в терминал команду:npm run openapi:pullОна втягивает в проект актуальный yaml-файл, парсит его и выдает папку api/ в корне проекта. В api/generated лежат два главных файла: со всеми ручками и с их типами (описаниями структуры данных).

Как выглядит мой флоу обновленияЯ скачиваю свежий spec (спецификацию - описание API) с бэкенда одной командой:npm run openapi:pullПод капотом она делает две вещи:Скачивает openapi. yaml с бэкенда через curlЗапускает генерацию на основе скачанного файлаИногда мне нужно только перегенерировать клиент из уже лежащего в репозитории spec - без скачивания с бэкенда:npm run openapi:generateВ качестве генератора я использую @hey-api/openapi-ts. Мой конфиг openapi-ts.

ts выглядит так: from '@hey-api/openapi-ts'export default defineConfig({ input: 'api/openapi. yaml', output: 'api/generated/', clean: true, client: '@hey-api/client-fetch'})Важный момент: я коммичу в репозиторий и api/openapi. yaml, и папку api/generated/.

Отраслевые последствия

Но руками generated/ никогда не правлю - только через генерацию. Как устроена структура api/Папка api/ у меня организована так:Файл/папкаНазначениеopenapi. yamlИсточник правды - OpenAPI-спецификация, скачанная с бэкендаgenerated/Всё, что сгенерировано: sdk.

tsРеэкспорт клиента из generatedsdk. tsРеэкспорт функций эндпоинтов, например whoIsTheretypes. tsРеэкспорт всех типовindex.

tsЕдиная точка входа: клиент + все типыЧто я использую в приложенииФункции для запросов я импортирую прямо из ~/api/generated. Например, в сторах, страницах или блоках: from '~/api/generated'Типы я импортирую из ~/api (через index. ts):import from '~/api'Обёртку над запросами (baseURL, заголовки, обработка ошибок) я настраиваю отдельно, это не относится к генерации, поэтому в статье не рассматриваю.

Этот прогресс даёт важные сигналы о будущем отрасли, и технологический мир внимательно наблюдает.