Содержание

• Содержание
• О проекте
• Перенос типов из Strapi
• StrapiModelUID
• Strapi.Types
  • Model
  • Payload
  • Response
  • ResponseCollection
  • Wrapper
• Strapi.Utils
  • Params
• Интеграция с нашими продуктами
  • @md_team/api-factory

О проекте

В проекте представлено решение, помогающее получить доступ к типам Strapi извне.

Проект построен на базе Strapi 5.

Перенос типов из Strapi

1. Создать в корне проекта файл copyTypes.ts / copyTypes.js

// copyTypes.ts

import { copyStrapiTypes } from '@md_team/strapi-share';

copyStrapiTypes({
    // путь до папки проекта Strapi
    strapiPath: 'path/to/strapi',
    // путь, куда будут помещены сгенерированные типы
    destPath: './src/types/strapi',
});

// copyTypes.js

const copyStrapiTypes = require('@md_team/strapi-share').copyStrapiTypes;

copyStrapiTypes({
    // путь до папки проекта Strapi
    strapiPath: 'path/to/strapi',
    // путь, куда будут помещены сгенерированные типы
    destPath: './src/types/strapi',
});

2. Добавить скрипт в package.json для .ts или .js файла

{
    "scripts": {
        "types": "node copyTypes.js",
        "types": "npx ts-node copyTypes.ts"
    }
}

3. Запустить скрипт в терминале

npm run types

StrapiModelUID

Создание типа, описывающего UID моделей. Может использоваться для помещения определенного UID модели в константу

import { UID } from '@strapi/strapi'

type StrapiModelUID = UID.ContentType | UID.Component;

Если в Strapi создан хотя бы один компонент, можно использовать UID.ContentType | UID.Component, иначе необходимо использовать UID.ContentType

Strapi.Types

Для правильного подтягивания типов необходимо установить пакет @strapi/strapi

Model

Получение типа модели

import { Strapi } from '@md_team/strapi-share';

type User = Strapi.Types.Model<'plugin::users-permissions.user'>;

Payload

Получение обработанного типа модели для его использования в POST/PUT-запросах

type UserPayload = Strapi.Types.Payload<'plugin::users-permissions.user'>

Response

Получение типа ответа Strapi на запрос экземпляра модели

type UserApi = Strapi.Types.Response<'plugin::users-permissions.user'>;

ResponseCollection

Получение типа ответа Strapi на запрос коллекции моделей Strapi по UID

type UsersApi = Strapi.Types.ResponseCollection<'plugin::users-permissions.user'>;

Wrapper

Оборачивает данные в { data: T }, имитируя формат body POST/PUT-запросов, необходимый для создания и обновления данных в Strapi

import { Strapi } from '@md_team/strapi-share';

type User = Strapi.Types.Model<'plugin::users-permissions.user'>;
type UserUpdateCustom = Strapi.Types.Wrapper<Pick<User, 'age'>>
// Итого получим: { data: { age: number } }

Strapi.Utils

Params

Типизирует объект параметров, который можно прокинуть, например, в params у Axios, который далее будет переведен в формат, принимаемый Strapi.

Типизация поддерживает основные методы работы с данными, приходящими из Strapi через REST API:

• filters - фильтрация
• populate - добавление вложенных полей
• sort - сортировка
• fields - выбор полей
• pagination - настройка пагинации

import { Strapi } from '..';

const params: Strapi.Utils.Params<'plugin::users-permissions.user'> = {
    filters: {
        age: {
            $eq: 30,
        },
        name: 'Steve',
    },
    populate: {
        user_info: true,
    },
    sort: {
        username: 'desc',
    },
    fields: ['id', 'documentId', 'age', 'username', 'name'],
    pagination: {
        page: 1,
        pageSize: 5,
    },
};

Интеграция с нашими продуктами

@md_team/api-factory

ApiStrapiTypes создает типы, которые можно использовать для типизации ApiFactory на базе стандартных ответов Strapi

import { Api, ApiFactory } from '@md_team/api-factory';
import { ApiStrapiTypes } from '@md_team/strapi-share';

// Использование утилиты для создания кастомных типов под Strapi
type ApiTypes = ApiStrapiTypes<'plugin::users-permissions.user'>;

// ApiFactory
const { apis } = new ApiFactory({
    httpConfig: {
        baseURL: 'https://admin.strapi.io/api'
    },
    apisConfig: {
        usersApi: {
            apiClass: Api<ApiTypes>,
            endpoint: 'users',
        },
    },
});