GraphQL Integration

Connect Retool to any GraphQL API.

1. Connecting to a GraphQL endpoint in Retool

Adding your GraphQL endpoint as a resource

Create a new resource in Retool and select "GraphQL" as the type. Enter your API endpoint in the "Base URL" field. Depending on how authentication is set up for your API, you may need to enter URL parameters or headers, or set the method via the "Authentication" dropdown.

See here for more details on authentication.

Resources > Add > GraphQL

Once you have entered your credentials you can click "Test Connection" to validate them.

Using GraphQL without adding a resource

It is also possible to connect to a GraphQL endpoint directly in the Retool interface by pasting the GraphQL endpoint URL directly into the query panel "URL" field.

You can add any necessary tokens in the "Headers" and "URL Parameters" input fields.

2. GraphQL Queries

You can now select your newly-created GraphQL resource from the Resource dropdown when creating queries in your Retool apps.

Query Arguments and Variables

GraphQL queries have one main distinction from other queries in Retool — arguments. Instead of putting Retool variables (e.g. {{textInput.value}}) directly into the query body, you can specify arguments within the query body and bind them to Retool variables via the "Variables" section underneath the editor. This makes your queries much neater.

Automatic refreshing

We parse the GraphQL query. If it's a mutation, we won't automatically refresh the query every time the parameters change. (Much like POST requests in REST APIs.)

Query introspection and auto-completion

We read the schema from your introspection endpoint, and use it for autocomplete and linting.

You can explore the schema using the schema panel on the right side of the bottom panel.

📘

Auto-Complete

You can press Ctrl + Space to show the autocomplete dropdown and see available query and mutation options.

Auto-formatting

To reformat your GraphQL query nicely, press the Format button in the ... menu in the top bar or press ⌘+L.

You can display the results of GraphQL queries as with any other query in Retool.

3. GraphQL Mutations

You can run GraphQL mutations the same way you would run a query. With mutations you are likely to have some input variables.

You can define input variables and their types as seen in the example below. You can then populate the variables input field with the appropriate values.

GraphQL Server-side Pagination

The Retool table component supports GraphQL Relay based pagination which allows you to pass a cursor to the endpoint and return a subset of the values.

To do this, enable "Server Side Pagination" in your table component settings, specify the pagination type as "GraphQL Relay cursor based" and populate values for your "Previous page" and "Next page" cursors.

For a more detailed walkthrough, see our Working with Tables docs.

Templates using GraphQL

You can explore a number of templates using GraphQL in the Retool product.

Other helpful content

GraphQL sample data sources

Updated about 22 hours ago


GraphQL Integration


Connect Retool to any GraphQL API.

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.