GraphQL

How to access Tokens Studio data directly using GraphQL in your project.

If you're looking to automate Tokens Studio data for build pipelines or pull it to another project or tool you're using, we offer a GraphQL endpoint that you can query directly.

Prerequisites:

Accessing the GraphQL endpoint

1

Access the Apollo Sandbox:

Open the GraphQL endpoint https://graphql.app.tokens.studio/graphql

2

Configure the Authorization Header

Open the Connection settings modal by clicking on the Gear icon in the top menu bar.

Within the Connection settings modal, there is a Shared headers section. Select "Authorization header" in the header key input.

In the value input: Bearer <API_KEY> (replace <API_KEY> with your API key. Click save.

3

View the available queries:

The query section will show the available queries as can be seen in the SDK-CLI documentation > Query page.

Example: Running a Query

1

Choose the query to use

Click on projects(...): PaginatedProjects! in the Fields section. This will automatically populate the base query in the Operations section of the Apollo playground.

2

Add the model to return.

Add data: [Project!]!. Again, this will auto-populate the Operations field. This step is needed because the Projects list is a paginated response.

3

Add the fields you want returned

Click on name: String! and organizationId: String! to add them to the query

Your query should be the following now:

query Projects($organization: String!) {
  projects(organization: $organization) {
    data {
      organizationId
      name
    }
  }
}
4

Add variables

In the "Variables" section, we need to add the organisation id. To get the organisation ID, Navigate to your organization in Studio. Copy the Organization ID from the URL (after /org/).

Return to the Apollo Sandbox, enter the organisation id in the "Variables section".

{
    "organization": "<org-ID>"
}
5

Run the Query

Click the button in the top right corner to receive a list of projects in the response. The name and organization id will be displayed for each item in the list.

Last updated