ToolJet/docs/versioned_docs/version-2.65.0/data-sources/graphql.md

70 lines
2.3 KiB
Markdown
Raw Normal View History

---
id: graphql
title: GraphQL
---
ToolJet can establish connections with GraphQL endpoints, enabling the execution of queries and mutations.
<div style={{paddingTop:'24px'}}>
## Connection
To establish a connection with the GraphQL global datasource, you can either click on the **+ Add new global datasource** button located on the query panel or navigate to the **[Data Sources](/docs/data-sources/overview)** page through the ToolJet dashboard.
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/graphql/graphgds-v2.png" alt="ToolJet - Data source - GraphQL" style={{marginBottom:'15px'}}/>
</div>
ToolJet requires the following to connect to a GraphQL datasource:
- **URL**: URL of the GraphQL endpoint.
- **Headers**: Any headers the GraphQL source requires.
- **URL parameters**: Additional query string parameters.
- **Authentication Type**: The method of authentication to use with GraphQL requests.
- **None**: No credentials or tokens are required.
- **Basic**: Requires Username and Password.
- **Bearer**: Requires a token, typically a JSON Web Token (JWT), to grant access.
- **OAuth 2.0**: The OAuth 2.0 protocol mandates the provision of the following parameters: access token URL, access token URL custom headers, client ID, client secret, scopes, custom query parameters, authorization URL, custom authentication parameters, and client authentication.
</div>
<div style={{paddingTop:'24px'}}>
## Querying GraphQL
1. Click on **+ Add** button of the query manager at the bottom panel of the editor.
2. Select the **GraphQL** datasource added in previous step.
3. Add the Query.
4. Click on the **Preview** button to preview the output or Click on the **Run** button to create and trigger the query.
### Required Parameters:
- **Query**
### Optional Parameters
- **Variable**
- **Headers**
<div style={{textAlign: 'center'}}>
<img className="screenshot-full" src="/img/datasource-reference/graphql/headers-v2.png" alt="ToolJet - Data source - GraphQl" style={{marginBottom:'15px'}}/>
</div>
#### Example
```yaml
{
todos {
id
description
}
}
```
:::tip
Query results can be transformed using transformations. Read our transformations documentation to see how: [link](/docs/tutorial/transformations)
:::
</div>