Skip to main content

Connect to GraphQL APIs

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.

Dynamic fields in GraphQL query body​

For most situations, using query arguments and variables (above) should be enough. However, in certain situations (e.g. dynamically selecting fields to query for), you may want to use JavaScript in the query body.

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

note

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 more details, see the guide to Server side pagination.

Templates using GraphQL​

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

Other helpful content​

GraphQL sample data sources​

Explore GraphQL integration guides​

Learn how to connect GraphQL data sources with some example integration guides.