Tokens Studio (Legacy Docs)

Appearance

GraphQL ​

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 ​

Step 1: Access the Apollo Sandbox: ​

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

Step 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.

WARNING

You will need an API key generated from the Tokens Studio platform. If you don't have this available, you can follow these instructions to generate one.

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

Step 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 ​

Step 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.

Step 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.

Step 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:

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

Step 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".

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

Step 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.