Connect GraphiQL to Salesforce

GraphiQL is built with React by the GraphQL Foundation. The introspection-driven capabilities of GraphiQL let you explore the schema and construct queries. The GraphiQL ReadMe describes how to use GraphiQL and includes links to several live demos. If you have GraphiQL running locally or in an environment, you can have the server running GraphiQL proxy requests from GraphiQL to the Salesforce GraphQL endpoint.

Although the easiest way to use GraphiQL is through GraphiQL online, you can also download a desktop version (only for MacOS and Linux), or you can run it and host it yourself.

This guide walks you through connecting GraphiQL online with Salesforce, which enables you to run queries and view the GraphQL API schema documentation. To query the API, you need the base URL and an API access token. You must also enable Cross-Origin Resource Sharing (CORS) in your Salesforce org.

By using GraphiQL online, you are giving access to your Salesforce org to a third-party app. If you choose to use GraphiQL online, we recommend that you use a sandbox or Developer Edition org that doesn't contain any private or sensitive information.

GraphQL API uses OAuth 2.0, similar to other Salesforce REST APIs. To get the API access token, follow the REST API Quick Start to create a connected app and then set up the authorization with OAuth.

The curl approach in the Quick Start guide is the simplest way to get started. For production apps, we recommend that you use a proper OAuth authorization flow that fits your specific use case.

After you create a connected app and set up your OAuth authorization, run this curl command.

The curl command returns your API access token in the access_token property. You need this access token to send a request via GraphiQL online.

Before you can send requests from GraphiQL online, enable CORS in your org to allow GraphiQL to request information from Salesforce.

To enable CORS:

  1. From Setup, enter CORS in the Quick Find box, then select CORS.
  2. In the Allowed Origins List section, click New to add the origin URL https://graphiql-online.com. Save your changes.
  3. In the Cross-Origin Resource Sharing (CORS) Policy Settings section, click Edit.
  4. Select Enable CORS for OAuth endpoints.
  5. Click Save.

Now that you have your access token and enabled CORS in your org, you're ready to send a GraphQL API request to Salesforce.

To send a request:

  1. Go to https://graphiql-online.com/graphiql.
  2. Enter your endpoint using the format https://[your_instance].my.salesforce.com/services/data/v{version}/graphql, for example https://myorg-dev-ed.my.salesforce.com/services/data/v54.0/graphql.
  3. Add an Authorization key in the Request Headers section. In the corresponding value field, enter the access token you generated in step 1. The authorization key format is Bearer [access_token].
  4. Enter your query in the GraphiQL window.
  5. Click on the ▶️ icon to run the GraphQL query. Alternatively, you can press Ctrl + Enter (Windows) or Cmd + Enter (Mac).

GraphiQL online includes a Request Headers section (1), a GraphiQL window for your query (2), and the Documentation Explorer (3).

Work with GraphiQL online

To explore the GraphQL API schema documentation in GraphiQL online, open the Documentation Explorer menu on the right.

The Documentation Explorer displays the types and queries available in the Salesforce GraphQL API.

Review the types and queries in the Salesforce GraphQL schema