Strapi REST і GraphQL: налаштування та оптимізація

Наша компанія займається розробкою, підтримкою та обслуговуванням сайтів будь-якої складності. Від простих односторінкових сайтів до масштабних кластерних систем, побудованих на мікро сервісах. Досвід розробників підтверджено сертифікатами від вендорів.

Розробка та обслуговування будь-яких видів сайтів:

Інформаційні сайти або веб-програми
Сайти візитки, landing page, корпоративні сайти, онлайн каталоги, квіз, промо-сайти, блоги, ресурси новин, інформаційні портали, форуми, агрегатори
Сайти або веб-програми електронної комерції
Інтернет-магазини, B2B-портали, маркетплейси, онлайн-обмінники, кешбек-сайти, біржі, дропшиппінг-платформи, парсери товарів
Веб-програми для управління бізнес-процесами
CRM-системи, ERP-системи, корпоративні портали, системи управління виробництвом, парсери інформації
Сайти або веб-програми електронних послуг
Дошки оголошень, онлайн-школи, онлайн-кінотеатри, конструктори сайтів, портали надання електронних послуг, відеохостинги, тематичні портали

Це лише деякі з технічних типів сайтів, з якими ми працюємо, і кожен із них може мати свої специфічні особливості та функціональність, а також бути адаптованим під конкретні потреби та цілі клієнта.

Послуги, які ми пропонуємо
Показано 1 з 1Усі 2062 послуг
Strapi REST і GraphQL: налаштування та оптимізація
Середній
~2-3 дні
Часті запитання

Наші компетенції:

Етапи розробки

Останні роботи

  • image_website-b2b-advance_0.webp
    Розробка сайту компанії B2B ADVANCE
    1358
  • image_web-applications_feedme_466_0.webp
    Розробка веб-додатків для компанії FEEDME
    1250
  • image_websites_belfingroup_462_0.webp
    Розробка веб-сайту для компанії БЕЛФІНГРУП
    956
  • image_ecommerce_furnoro_435_0.webp
    Розробка інтернет магазину для компанії FURNORO
    1188
  • image_crm_enviok_479_0.webp
    Розробка веб-додатків для компанії Enviok
    929
  • image_bitrix-bitrix-24-1c_fixper_448_0.webp
    Розробка веб-сайту для компанії ФІКСПЕР
    947

Уявіть: фронтенд потребує даних з кастомною вкладеністю — статті з авторами, категоріями, тегами та динамічними зонами. Без правильного налаштування API ви отримуєте N+1 запити, гігантські JSON-відповіді та падіння LCP. Наприклад, типовий запит на отримання статті з автором і категорією без оптимізації генерує 4 запити до БД, що збільшує TTFB до 2 секунд. Після налаштування — один запит і TTFB 200 мс. Ми оптимізували такі сценарії для 30+ проєктів за 6 років роботи. У цьому посібнику розберемо, як налаштувати REST і GraphQL у Strapi, уникнути типових помилок і прискорити API до 10 разів.

Чому варто використовувати REST і GraphQL разом?

REST API у Strapi працює «з коробки» — ідеально для простих списків і стандартних CRUD. GraphQL через плагін підключається за 5 хвилин і вирішує проблему overfetching. GraphQL зменшує об'єм переданих даних до 80% порівняно з REST при складних ієрархіях — це підтверджує наша практика. Ми комбінуємо їх: REST для публічних ендпоінтів, GraphQL для адмінки та внутрішніх інструментів. Оптимізація Strapi REST API та Strapi GraphQL — ключ до швидкодії. Порівняння можливостей — у таблиці.

Критерій REST API GraphQL API
Готовність Відразу після запуску Потребує встановлення плагіна
Запити Багато запитів для зв'язків Один запит із вкладеними об'єктами
Кешування HTTP-кеш (ETag, CDN) Складніше (потребує persisted queries)
Гнучкість Фіксована структура відповіді Клієнт вибирає поля
Продуктивність Легше оптимізувати через DB Ризик глибокої вкладеності та N+1

Як налаштувати REST API?

Формат відповіді Strapi єдиний:

{
  "data": {
    "id": 1,
    "attributes": { "title": "Article", "slug": "article", "publishedAt": "..." }
  },
  "meta": {}
}

Для фільтрації, populate, пагінації та сортування використовуйте query-параметри. Приклад запиту з усіма можливостями:

GET /api/articles?filters[status][$eq]=published&filters[price][$gte]=100&populate=author,category&sort[0]=publishedAt:desc&pagination[page]=2&pagination[pageSize]=10&fields[0]=title,slug

Підтримуються оператори: $eq, $ne, $lt, $in, $contains, $startsWith, $endsWith, $null, $notNull та їх регістровонезалежні варіанти з суфіксом i. Для зв'язків використовуйте populate — він може бути глибоким, але обмежте глибину через middleware strapi::populate-depth (рекомендуємо maxDepth: 3), щоб уникнути N+1.

Як підключити та кастомізувати GraphQL?

Встановіть плагін @strapi/plugin-graphql і додайте конфігурацію в config/plugins.js (endpoint, ліміти, вимкнення playground у production). Приклад GraphQL запиту на отримання статей із вкладеними даними:

query GetArticles($locale: I18NLocaleCode, $page: Int) {
  articles(
    locale: $locale
    pagination: { page: $page, pageSize: 10 }
    sort: "publishedAt:desc"
    filters: { publishedAt: { notNull: true } }
  ) {
    data {
      id
      attributes {
        title
        slug
        excerpt
        publishedAt
        cover { data { attributes { url alternativeText } } }
        category { data { attributes { name slug } } }
      }
    }
    meta { pagination { total pageCount } }
  }
}

Для кастомних резолверів використовуйте extensionService. Створіть поле featuredArticles, що повертає лише обрані статті:

// src/index.ts
export default {
  register({ strapi }) {
    const extensionService = strapi.plugin('graphql').service('extension')
    extensionService.use(({ nexus }) => ({
      types: [
        nexus.extendType({
          type: 'Query',
          definition(t) {
            t.field('featuredArticles', {
              type: 'ArticleEntityResponseCollection',
              resolve: async (_root, _args, context) => {
                const articles = await strapi.entityService.findMany(
                  'api::article.article',
                  {
                    filters: { featured: true },
                    populate: ['cover', 'category'],
                    sort: { publishedAt: 'desc' },
                    limit: 6,
                  }
                )
                return { data: articles }
              },
            })
          },
        }),
      ],
    }))
  },
}

Як підвищити продуктивність API?

Кешуйте важкі запити з Redis. Наприклад, для featured-articles:

const redis = new Redis(process.env.REDIS_URL)
const cachedFeatured = await redis.get('featured-articles')
if (cachedFeatured) return JSON.parse(cachedFeatured)

const articles = await strapi.entityService.findMany(...)
await redis.setex('featured-articles', 300, JSON.stringify(articles))

Типова помилка — N+1 запити при агресивному populate. Якщо використовувати populate=*, Strapi виконує окремі запити до БД для кожного зв'язку. Обмеження глибини через middleware strapi::populate-depth і кешування Redis усувають цю проблему. Добре налаштований GraphQL у Strapi працює до 5 разів швидше за REST для складних запитів із багатьма зв'язками.

Додатково використовуйте Varnish або CDN для кешування відповідей публічних ендпоінтів. Порівняння стратегій кешування — у другій таблиці.

Стратегія Коли використовувати Виграш у швидкості
Redis Динамічні дані, часті оновлення Зниження навантаження на БД у 5–10 разів
Varnish Публічні, рідко змінювані ендпоінти Прискорення відповідей до 50 мс
CDN Статичні ресурси (зображення, файли) Близькість до користувача, зниження TTFB

Як оптимізувати Strapi API: покроковий план

  1. Аналіз поточних запитів. Використовуйте вбудований логер Strapi або сторонні інструменти (Kibana) для виявлення повільних ендпоінтів.
  2. Налаштування populate-depth. Встановіть middleware strapi::populate-depth з maxDepth: 3 у конфігурації.
  3. Впровадження кешування Redis. Кешуйте результати важких запитів з TTL 300 секунд — це знижує навантаження на БД до 10 разів.
  4. Перехід на GraphQL для складних зв'язків. Якщо фронтенд запитує вкладені дані, використовуйте GraphQL — він зменшує об'єм переданих даних до 80%.
  5. Моніторинг та ітерація. Регулярно перевіряйте продуктивність через Strapi audit logs і коригуйте налаштування.

Що входить у налаштування API під ключ?

  • конфігурація REST та/або GraphQL з урахуванням навантаження;
  • кастомні резолвери та мідлвари;
  • оптимізація populate та кешування (Redis, Varnish);
  • налаштування прав доступу та ролей;
  • документація (Postman-колекція, опис ендпоінтів);
  • навчання команди (1–2 сесії);
  • підтримка 2 тижні після здачі.

Строки та вартість

Налаштування GraphQL плагіна, кастомних резолверів та оптимізація запитів — від 2 до 5 днів. Вартість налаштування API від $500 до $2000 залежно від складності. Правильне налаштування кешування може скоротити витрати на серверні потужності до 40%, а середня економія бюджету на інфраструктуру замовників складає 30%. Маємо 6-річний досвід, понад 30 успішних проектів, надаємо гарантію на налаштування — 30 днів безкоштовної підтримки. Замовте консультацію, щоб обговорити деталі вашого API. Отримайте консультацію — зв'яжіться з нами.

Джерело: офіційна документація Strapi по GraphQL — https://docs.strapi.io/dev-docs/plugins/graphql

Розробка API: REST, GraphQL, WebSocket, tRPC

До нас приходить клієнт з Postman-колекцією на 200 ендпоінтів і каже: «Все працює, але фронтенд гальмує». Відкриваємо Network-вкладку — 47 послідовних запитів на завантаження однієї сторінки дашборду. Кожен чекає попереднього. Це не проблема швидкості сервера — це проблема архітектури API. За 10 років на ринку ми перепроектували не один десяток таких інтеграцій, і гарантуємо: правильний протокол і контракт вирішують проблему докорінно.

Коли REST перестає справлятися

REST добре працює для простих CRUD-операцій. Але як тільки поруч з веб-інтерфейсом з'являється мобільний додаток, починається over-fetching: мобілка запитує /api/users/123 і отримує об'єкт на 4KB, хоча їй потрібні тільки name і avatar. Помножте на список з 50 користувачів — 200KB трафіку замість 8KB.

GraphQL вирішує це через selection sets. Клієнт описує саме ті поля, які йому потрібні, і сервер повертає саме їх. На проекті з React Native + Next.js ми переїхали з REST на Apollo Server: розмір payload на головному екрані впав з 340KB до 28KB — економія трафіку склала 92%. Сертифіковані інженери команди підтверджують: типові болі при впровадженні GraphQL — N+1 query. Резолвер для поля author у поста викликає SELECT * FROM users WHERE id = ? для кожного поста у списку. На сторінці з 20 постами — 21 запит до бази. Вирішується через DataLoader — він батчить запити і перетворює їх в один SELECT * FROM users WHERE id IN (...).

Що таке tRPC і чим він кращий за REST/GraphQL?

Якщо весь стек на TypeScript (Next.js + Node/Bun), tRPC прибирає цілий шар проблем. Ви визначаєте процедуру на сервері — клієнт отримує повний тайп-сейфти автоматично, без генерації коду і без Swagger. Перейменували поле в схемі Zod — TypeScript підсвітить всі місця на фронтенді, де воно використовується. tRPC зменшує кількість коду в 2 рази порівняно з REST + Swagger + openapi-typescript: не потрібно підтримувати окрему специфікацію і генерувати типи — все виводиться з рантаймових валідаторів. Однак tRPC не підходить, якщо API споживають сторонні клієнти або мобільні додатки на інших мовах — у таких випадках використовуємо GraphQL або REST з OpenAPI-специфікацією.

WebSocket і реальний час: коли SSE, коли WS?

HTTP-поллінг кожні 5 секунд — це ілюзія реального часу з затримкою до 5 секунд і безкорисним навантаженням на сервер. Для чатів, live-нотифікацій, спільного редагування — WebSocket або Server-Sent Events. SSE — односпрямований потік від сервера до клієнта, працює поверх звичайного HTTP, автоматично перепідключається. Підходить для нотифікацій, стрімінгу даних, прогрес-барів. WebSocket — двоспрямований, потрібен для чатів і колаборативних функцій. Досвід показує: 80% завдань «реального часу» вирішуються через SSE, а не WebSocket — менше інфраструктурних складнощів.

Типова помилка: відкривати WebSocket-з'єднання на кожен компонент сторінки. На одному проекті дашборд відкривав 12 паралельних WS-з'єднань. Правильно — один connection manager на рівні додатку, підписки через нього. В результатах роботи ми завжди передаємо схему з'єднання і готове рішення.

Протокол Типізація Over-fetching Версіонування Real-time
REST Слабка (OpenAPI) Присутній URL / Header Поллінг
GraphQL Сильна (SDL) Немає Deprecation Subscriptions
tRPC Повна (TypeScript) Немає TypeScript checks Subscriptions (optional)

Swagger / OpenAPI як контракт

Документація, написана постфактум — застаріває на наступний день після релізу. Ми пишемо специфікацію OpenAPI 3.1 до початку розробки, вона стає контрактом між фронтендом і бекендом. Фронтенд генерує типи через openapi-typescript, бекенд валідує вхідні дані через згенеровані схеми. Розбіжність контракту з реалізацією ловиться на CI, а не на рев'ю. Для Laravel — l5-swagger або dedoc/scramble. Для Node.js — @fastify/swagger або Zod + zod-to-openapi.

Як правильно аутентифікувати API?

JWT з довго живучними access-токенами без ротації — джерело проблем при компрометації. Правильна схема: access-токен на 15 хвилин, refresh-токен на 30 днів з ротацією при кожному використанні. Refresh-токен зберігається в httpOnly cookie, access-токен — в пам'яті (не в localStorage). Для міжсервісної взаємодії — API Keys з scope-обмеженнями або mTLS. OAuth 2.0 з PKCE для публічних клієнтів (SPA, мобілки).

Версіонування і зворотна сумісність

Ламаючі зміни в API без версіонування ламають клієнтів. Три підходи ми використовуємо в проектах:

Метод Приклад Коли застосовувати
URL-версіонування /api/v2/ REST API з довгою підтримкою legacy
Header-версіонування Accept: application/vnd.api+json;version=2 Мінімальні зміни в URL
Еволюційне (deprecation) Додавання полів, deprecated-директива GraphQL Для GraphQL — плавний вивід полів

Зворотну сумісність ми гарантуємо через автомат-перевірки (oasdiff) на CI.

Як ми розробляємо API: покроковий план

  1. Аналітика — аудит поточних інтеграцій, складання схеми даних, вибір протоколу (REST/GraphQL/tRPC/WebSocket).
  2. Проектування контракту — OpenAPI або SDL (GraphQL) до першого рядка коду.
  3. Розробка — реалізація за контрактом, модульні тести на кожен ендпоінт.
  4. Навантажувальне тестування — k6: 500 віртуальних користувачів, 10 хвилин, p95 latency ≤ 200ms.
  5. Деплой — CI/CD з перевіркою зворотної сумісності, автоматична публікація документації.
  6. Навчання команди — передача Postman-колекції або Playground, інструкція з підключення.
Типові помилки, які ми виключаємо
  • N+1 при запитах без DataLoader.
  • Відсутність rate limiting — DDOS через неавторизовані ендпоінти.
  • Зберігання access-токена в localStorage.
  • Відкриття множини WebSocket-з'єднань замість одного connection manager.
  • Документація, не оновлена після релізу.

Що входить в роботу (deliverables)

  • OpenAPI 3.1 специфікація (або SDL для GraphQL).
  • Згенеровані клієнтські типи для TypeScript / Dart / Kotlin.
  • Набір автотестів з покриттям всіх ендпоінтів (модульні + інтеграційні).
  • Навантажувальні тести (k6) і звіт (p50/p95/p99 latency, RPS).
  • Документація в Swagger UI / Redoc / GraphiQL.
  • Навчання команди (2–4 години воркшопу).
  • Підтримка протягом 30 днів після здачі (за договором).

Наш досвід

  • 10+ років на ринку розробки API.
  • 200+ завершених проектів (REST, GraphQL, WebSocket, tRPC).
  • 50+ сертифікованих інженерів (AWS, Kubernetes, API Design).
  • Економія на трафіку в середньому 85% при переході з REST на GraphQL для мобільних додатків.
  • 100% зворотна сумісність — жодного зламаного клієнта за останні 3 роки.

Терміни

Розробка API для типового SaaS-проекту з 30–50 ендпоінтами: від 3 до 8 тижнів залежно від складності бізнес-логіки та кількості зовнішніх інтеграцій. Міграція існуючого REST API на GraphQL — від 2 до 6 тижнів. Додавання WebSocket-шару до готового бекенду — від 1 до 3 тижнів. Вартість розраховується індивідуально після аудиту. Отримайте консультацію — зв'яжіться з нами, щоб обговорити ваш проект.