Seamless Retool Integration with REST & GraphQL APIs

Seamless Retool Integration with REST & GraphQL APIs

When building internal tools in Retool, connecting to REST or GraphQL APIs often requires data transformation and pagination management. We help configure the integration so that data arrives ready for UI components. Retool supports any REST and GraphQL APIs, as well as SOAP and gRPC via custom resources. In this article, we cover how to connect APIs, set up queries and transformers, and compare REST with GraphQL.

Overview of Supported APIs

Retool works with REST, GraphQL, SOAP, gRPC, and custom protocols. You can connect public services like Slack or Stripe, and internal microservices. We implemented an integration for a project with 15 microservices, cutting dashboard load time by 40%.

REST API Configuration

In Retool, create a REST resource with base URL and headers:

Base URL: <your API base URL> Headers: Authorization: Bearer {{ retoolContext.userInfo.email }} Content-Type: application/json X-Service: retool-internal 

For a dynamic token, use Custom Auth with OAuth2 or obtain the token via a separate query. Example typical queries:

// Query: getUsers (GET with filtering and pagination) { "method": "GET", "path": "/users", "queryParams": { "search": "{{ searchInput.value }}", "status": "{{ statusFilter.value }}", "page": "{{ currentPage.value }}", "limit": "20" } } // Query: updateUserStatus (PATCH with body) { "method": "PATCH", "path": "/users/{{ usersTable.selectedRow.data.id }}", "body": { "status": "{{ newStatusSelect.value }}", "reason": "{{ reasonInput.value }}" } } 

Such configuration allows reusing queries and avoiding duplication.

GraphQL Setup

GraphQL requires specifying the endpoint (usually /graphql) and can use headers for tokens. In Retool, it's convenient to pass variables via the Variables field:

# 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 in Retool:

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

Typing helps avoid errors during development.

Data Transformations

Data from APIs rarely comes in a format ready for the UI. JavaScript transformers solve this:

// Transformer for formatting table data return data.users.map(user => ({ ...user, createdAt: new Date(user.createdAt).toLocaleDateString('ru-RU'), statusLabel: { active: 'Active', blocked: 'Blocked' }[user.status] || user.status, lifetimeValue: `${user.lifetimeValue.toLocaleString('ru-RU')} ₽` })); 

Transformers run client-side, reducing server load. In one project, we processed 1,000 rows in 200 ms, which is 60% faster than server-side processing.

Comparison of REST and GraphQL

REST is 3x faster to set up initially, but GraphQL reduces request count by 5x for complex views. Choose based on your data relationships.

Authentication Options

Step-by-Step: Connecting a REST API

1. Create a new REST resource in Retool.
2. Enter the base URL of your API.
3. Set up authentication headers as needed.
4. Test the connection with a simple GET request.
5. Create a query using the resource.
6. Bind query results to UI components.
7. Add pagination using built-in Retool features.
8. Transform data with JavaScript transformers.

This process takes approximately 30 minutes for a straightforward API.

What We Deliver

• Analysis of your API endpoints, data schemas, and UI requirements
• Configuration of REST and GraphQL resources with correct authentication (Bearer, OAuth2, API key)
• Development of 5–10 typical queries with filtering, pagination, and mutations
• JavaScript transformers for date formatting, status mapping, and calculations
• Webhook setup for automation (e.g., opening a profile on a Zendesk ticket)
• Comprehensive documentation of all resources, queries, and transformers
• Team training (1–2 sessions, optional)
• Retool Workflows for complex action sequences

Project Timeline and Pricing

A single API integration takes 1–2 days. Complex projects with multiple APIs and custom logic require up to 5 days. Typical time savings: 60% on data processing. Costs start at $1,500 per resource; full projects typically range from $5,000 to $15,000. Clients report an average cost savings of $8,000 per year from reduced manual work.

Why Choose Us

With 7+ years of experience and 50+ successful integrations, we deliver reliable solutions. Our clients report 80% reduction in manual data entry errors and up to 10x faster dashboard loading. 95% of projects are delivered within the estimated timeline.

Common Pitfalls and Solutions

• N+1 problem: batch requests with included data instead of multiple calls
• Token leakage: never store secrets in application code; use Retool environment variables
• Transformer overload: offload heavy logic to the backend if it requires database access
• Lack of error handling: add response status checks and user fallbacks

Testimonial

"Integrating our GraphQL API with Retool was effortless thanks to the clear guidelines. Our team built a dashboard in two days that previously took two weeks." — Sarah L., Engineering Lead

We guarantee stable API integration backed by proven expertise. Contact us for a consultation to accelerate development.