The Zoom GraphQL API playground: Your new favorite development tool
Tags: graphql, api, tutorial
Published: 2023-03-31 18:03:43

The Zoom [GraphQL API beta](https://developers.zoom.us/docs/api/graphql/overview/) provides an alternative to our REST API that gives you the flexibility to create queries and data mutations that meet your specific use case requirements.To support your development efforts using this new API design, we’ve launched the Zoom GraphQL API playground, a powerful in-browser IDE that provides an interactive UI to test and explore Zoom’s GraphQL APIs. 

In this blog post, we'll walk you through the Zoom GraphQL API Playground and show you how to navigate the APIs schema, execute queries, and perform mutations. 


## What are GraphQL queries and mutations?

Before we get started, it’s helpful to understand the difference between GraphQL queries and mutations. 

A **GraphQL query** is a request for fetching specific data from a server. It allows developers to specify the fields they need and the relationships between those fields. This allows developers to get only the data they need from Zoom, reducing the amount of unnecessary data that is transferred over our network.

A **GraphQL mutation**, on the other hand, is a request to modify data on the server. It allows developers to create, update, or delete data in their Zoom account.


## Get started with the Zoom GraphQL API playground

The Zoom GraphQL API is currently in beta. To access this powerful development tool, fill out the beta intake form [here](https://beta.zoom.us/key/GRAPHQL).
To get started with the Zoom GraphQL API playground, navigate to https://nws.zoom.us/graphql/playground in your browser. You will see a split-screen interface with three sections: **HTTP Headers**, **Query Variables**, and **Query Editor**.


![Playground Options](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/skp9ageepqcjv1phingl.png)

The **HTTP Headers** section allows you to add your access token to authenticate your request. 

The **Query Variables** section gives you the option to add variables under Variables when you are making mutations.
To authenticate your requests, add an access token to the **HTTP Headers** section. Here is what the syntax will look like:

```
{
  "Authorization": "Bearer <Token>"
}

```

You can use either the [server-to-server OAuth access token](https://marketplace.zoom.us/docs/guides/build/server-to-server-oauth-app/) or the [user-authorized OAuth access token](https://marketplace.zoom.us/docs/guides/auth/oauth/). To use server-to-server OAuth, generate a token with this [S2S OAuth utility script](https://github.com/zoom/server-to-server-oauth-token) and copy it to your clipboard.

The **Query Editor** section is where you write your GraphQL queries. As you type, the playground suggests fields, types, and arguments to make it easy for you to write your query.
Here’s an example of  a query you can use to get a list of users from your Zoom account:

```
{
  "Authorization": "Bearer <Token>"
}
```

```
{
  users(first:100){
	edges{
  	id
  	firstName
  	lastName
  	department
	}
  }
}

```

Once you've written your query, click the “Play” button in the middle of the window to test it. The results will appear in the right-hand window. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/64ey7y6w0358q4reuaio.gif)



## Write a GraphQL API mutation
Now, let’s write a mutation to create a user with the GraphQL API playground. 

In the **Query Editor section**, add the mutation to create users:

```
mutation createUser ($input: UserCreateInput!) {
	createUser (input: $input) {
    	email
	id
    	firstName
    	lastName
    	type
	}
}
```

In the Query Variables section, define variables to use in the GraphQL Query. Here we will input the details that are necessary to create a user:

```

 {
  "input": {
	"action": "CUST_CREATE",
	"userInfo": {
  	"email": "test+4@test.zoom.us",
  	"firstName": "Test",
  	"lastName": "User 2",
  	"type": "Basic"
	}
  }
}
```

Click the “Play” button to make the mutation. The output will only return the fields that we asked for when making the query. In this case the following fields:

 
```
email
 id
 firstName
 lastName
 type
```

Here is how the output looks: 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0idbs70twwsqt276fjh0.gif)

To recap, in the two examples above we’ve queried (read) data and performed a mutation (wrote) on our account. For a full list of the queries and mutations available, click the “Docs” icon at the top right of the playground to browse the reference documentation or visit the [Zoom GraphQL API Reference](https://developers.zoom.us/docs/graphql/reference/).

## Why use the Zoom GraphQL API playground?

**Rich user interface**

The GraphQL API playground provides a modern user interface that is easy to navigate and use. It includes features like auto-complete, syntax highlighting, and query history that help streamline the development process. The playground also has a "Prettify" button that formats your query to make it more readable. You can open multiple tabs in the playground to perform a variety of operations like exploring the documentation, merging fragments into queries and changing the theme of your UI amongst others.

![Rich User Interface](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tfi8o2mvtsjveb4mo0qa.gif)


**Interactive API exploration**

The playground provides an interactive environment for exploring an API's functionality. Developers can use it to browse through the schema, view documentation, and experiment with queries and mutations. For your convenience, the Zoom GraphQL API playground has embedded documentation that allows you to see the available fields, types, and arguments for a query.

![Interactive API Exploration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wevnibnlnwpf2lel0lt2.gif)



**Automatic query validation**


The playground automatically validates queries as they are entered, providing feedback on syntax errors and suggesting possible corrections. This helps developers avoid common mistakes, save time spent correcting errors, and improve query accuracy.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1fefrdye4j46l4cuat05.gif)

**Merge fragments into queries**

The "Merge fragments into query" button in the GraphQL API playground allows you to combine multiple fragments into a single GraphQL query.
When you click on the “Merge fragments into the query” button, the GraphQL playground takes all of the fragments in the current query and merges them into a single query. This is helpful when you have a large number of fragments used across your queries and you want to consolidate them into a more organized and streamlined query.

![Fragments and Queries](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ki12wwyg6ubmfz10zmw.gif)

## Conclusion
The Zoom GraphQL API playground is a useful tool for streamline your development process, improve your code quality, and make sure that your API is functioning correctly. 

Ready to take your development game to the next level? [Join the Zoom GraphQL API](https://beta.zoom.us/key/GRAPHQL) beta to get early access to new features and updates while shaping the roadmap for this impactful tool . What are you waiting for? Give the [GraphQL playground](https://nws.zoom.us/graphql/playground?) a try!