Інтеграція Retool з REST та GraphQL API: налаштування під ключ

Інтеграція Retool з REST та GraphQL API: налаштування під ключ

При розробці внутрішнього інструменту на Retool часто стикаються з тим, що REST або GraphQL API повертає дані в незручному форматі, а прямий доступ до бази даних заборонено. Наприклад, дати приходять в ISO, статуси — числами, а пагінація потребує ручної обробки. Ми допомагаємо налаштувати інтеграцію так, щоб дані приходили вже підготовленими для таблиць і форм. Підтримуємо будь-які REST та GraphQL API, а також SOAP та gRPC через кастомні ресурси. У цій статті розберемо, як правильно підключити API, налаштувати запити та трансформації, а також порівняємо REST і GraphQL.

Які API можна підключити до Retool?

Retool підтримує будь-які REST та GraphQL API, а також SOAP, gRPC та інші протоколи через кастомні ресурси. Можна підключати як публічні сервіси (Slack, Stripe), так і внутрішні мікросервіси. Головне — щоб був доступний ендпоінт і підтримувалася аутентифікація. Типові сценарії: підключення CRM, білінгу, аналітики. Ми реалізували інтеграцію для проекту з 15 мікросервісами — час завантаження дашборду скоротився на 40%.

REST API: налаштування ресурсу та запити

У Retool → Resources → REST API створюємо ресурс з базовим URL та заголовками:

Base URL: https://api.example.com/v1 Headers: Authorization: Bearer {{ retoolContext.userInfo.email }} Content-Type: application/json X-Service: retool-internal 

Для динамічного токена використовуємо Custom Auth з OAuth2 або запит токена через окремий query. Приклади типових запитів:

// Query: getUsers (GET з фільтрацією та пагінацією) { "method": "GET", "path": "/users", "queryParams": { "search": "{{ searchInput.value }}", "status": "{{ statusFilter.value }}", "page": "{{ currentPage.value }}", "limit": "20" } } // Query: updateUserStatus (PATCH з тілом) { "method": "PATCH", "path": "/users/{{ usersTable.selectedRow.data.id }}", "body": { "status": "{{ newStatusSelect.value }}", "reason": "{{ reasonInput.value }}" } } 

Така конфігурація дозволяє перевикористовувати запити та уникнути дублювання.

GraphQL: особливості підключення та запитів

GraphQL потребує вказання ендпоінту (зазвичай /graphql) та може використовувати заголовки для токена. У Retool зручно передавати змінні через Variables:

# Query: fetchDashboardData query GetDashboard($userId: ID!, $ordersLimit: Int!) { user(id: $userId) { id name email subscription { plan, status, expiresAt } orders(limit: $ordersLimit) { id status total createdAt } } } 

Variables у Retool:

{ "userId": "{{ userIdInput.value }}", "ordersLimit": 10 } 

Важливо: для складних схем типізація допомагає уникнути помилок на етапі розробки.

Чому важливі трансформери?

Дані з API рідко приходять у форматі, готовому для UI. Наприклад, дати в ISO потребують локалізації, статуси — перекладу. JavaScript-трансформери вирішують це:

// Transformer для форматування даних таблиці return data.users.map(user => ({ ...user, createdAt: new Date(user.createdAt).toLocaleDateString('uk-UA'), statusLabel: { active: 'Активний', blocked: 'Заблокований' }[user.status] || user.status, lifetimeValue: `${user.lifetimeValue.toLocaleString('uk-UA')} ₴` })); 

Трансформери виконуються на клієнті — це знижує навантаження на сервер. В одному з проектів ми обробляли до 1000 рядків за 200 мс.

Як порівнюються REST та GraphQL у Retool?

Висновок: REST швидше в налаштуванні, GraphQL ефективніше при складних зв'язках. Retool підтримує обидва — вибирайте під задачу.

Які типи аутентифікації підтримуються?

Що входить у нашу роботу з налаштування Retool?

Ми виконуємо інтеграцію під ключ, яка включає:

1. Аналіз — вивчаємо ваші API endpoints, схеми даних та вимоги до інтерфейсу.
2. Налаштування ресурсів — створюємо REST та GraphQL ресурси з коректною аутентифікацією (Bearer, OAuth2, API key).
3. Створення запитів — розробляємо 5–10 типових запитів з фільтрацією, пагінацією, мутаціями.
4. Трансформери — пишемо JavaScript-перетворення для форматування дат, статусів, обчислень.
5. Вебхуки — налаштовуємо Webhook-тригери для автоматизації (наприклад, відкриття профілю при тікеті в Zendesk).
6. Документація — передаємо опис усіх ресурсів, запитів та трансформерів.
7. Навчання — проводимо 1–2 сесії для вашої команди (опціонально).
8. Retool Workflows — автоматизація послідовностей дій для складних сценаріїв.

Скільки часу займає налаштування?

Підключення одного REST або GraphQL ресурсу та створення 5–10 запитів з трансформерами — від 1 до 2 днів. Для складних інтеграцій з декількома API та кастомною логікою — до 5 днів. Терміни уточнюємо після аналізу. Типова економія часу при використанні трансформерів — до 60% на обробці даних. Вартість інтеграції розраховується індивідуально та залежить від складності проекту.

Типові помилки та їх вирішення

• Ігнорування N+1 — при REST робіть один запит з вкладеними даними замість декількох.
• Витік токенів — ніколи не зберігайте секрети в коді додатку, використовуйте змінні оточення Retool.
• Складні трансформери — виносьте логіку на backend, якщо вона потребує доступу до БД або зовнішніх сервісів.
• Відсутність обробки помилок — додавайте перевірки статусу відповіді та fallback для користувача.

Ми гарантуємо, що після налаштування ваш Retool-інструмент буде стабільно працювати з будь-якими API. Наш досвід — понад 5 років на ринку, десятки проектів з інтеграції. Зв'яжіться з нами для оцінки вашого проекту — ми підберемо оптимальне рішення. Отримайте консультацію вже сьогодні, щоб прискорити розробку.