Если ваш бэкенд использует Swagger (OpenApi 3.0) для генерации документации, то вы можете знатно упростить себе жизнь на крупном проекте.
Однако это упрощение идет дальше типичного чтения документации. Прямо сейчас вы можете генерировать Клиент, Сервер и Типы данных для TypeScript из файла openapi schema.
🎁 Пакет для генерации Клиента: https://github.com/OpenAPITools/openapi-generator-cli
Установка:
yarn add @openapitools/openapi-generator-cli
либо
npm install @openapitools/openapi-generator-cli
1️⃣ Предварительно создайте папку для результатов генерации и файл конфигурации.
2️⃣ После установки вам нужно создать файл конфигурации openapitools.json для генератора и папку для хранения результатов
openapitools.json:
{
"$schema": "node_modules/@openapitools/openapi-generator-cli/config.schema.json",
"spaces": 2,
"generator-cli": {
"version": "5.1.1",
"generators": {
"v1": {
"generatorName": "typescript-fetch",
"inputSpec": "link_or_path_to_yours_openapi_schema",
"output": "path_to_yours_output",
"additionalProperties": {
"supportsES6": true,
"sagasAndRecords": true,
"typescriptThreePlus": true,
"withInterfaces": true,
"withoutRuntimeChecks": false
}
}
}
}
}
```3️⃣ Затем запустите процесс генерации командой:
```yarn openapi-generator-cli generate
4️⃣ В результате мы получим:generated-api/models — здесь хранятся типы данных и функции для трансформации данных бэк->фронт фронт->бэк
generated-api/apis — здесь вы найдете сгрупированные по эндпоинтам классы для запросов к API
В идеале этого хватает для полноценного использования.
Однако, в случаях, когда ваш проект еще недостаточно стабилен, хорошая практика — использовать сгенерированный код, как референс.
Вы потратите меньше усилий на поддержке актуальности кода, т.к. проще сделать diff между двумя каталогами, чем вносить все изменения в модели вручную.
🦷 Если вам необходимы только типы для TypeScript, может подойти пакет: https://github.com/drwpow/openapi-typescript
Полный список генераторов вы найдёте здесь: https://openapi-generator.tech/docs/generators
#rdclr_frontend #React #product #read #library