Improve GraphQl productivity with Altair GraphQl client

There are several graphql clients available right now for querying and debugging graphql endpoints like graphiql, graphql playground and even postman with beta support.

Altair graphql client is a feature rich graphql client with simple and user friendly UI like postman. In this post I will share some cool altair tricks. For more you can visit https://altair.sirmuel.design/

Generate query from schema Doc
When testing the queries after development, we often have to enter all the fields the query returns to test all. Using generate queries feature, you can create all fields and subfields to a certain depth. The depth can be set to minimum 3 for showing root fields of the query, Increase that to display more values. For example I have set to 6 to show query depth of 4

To auto fill the query open the doc window and click add query button for any query. . That's it you will have pre generated query where you can fill the arguments and send.

Collections
Collections, is a great feature when you want to share your queries or backup and restore your work. Whenever you have completed your API, press the save button on url bar to save to existing collection or a new collection .

You can use collection window to switch between collections, load query/mutation from collection, export and import collections.. Collections store your variables and headers also

Environments
This is my favorite feature. You can create any number of environments and easily switch between them. When you have to test the queries in multiple env like your local, dev, staging, production etc.,you can create multiple env and just by using env switcher you can update the variable factors like headers, variables, arguments and url in environments.

Creating a environment
Click on the environment switcher and click on the last option environments to create a new environment. You have options to create env vars in global scope as well as environment scope. create new environment and declare all your env vars and save the form. .

Every env var is represented by {{env_var_code}} format.

env var in url
Enter your url as {{url}}/graphql in url bar and create a environment variable as url and provide environment url.

env var in headers
The common usage would be Bearer token or other auth token,
Authorization -> Bearer {{token}}.

env var in varibales
You cannot use env vars directly in query so you can replace with graphql variables and you can enter the env var expression there. for example

{
  "cartId": "{{cartId}}"
}

Comments

[Sir Muel I 🇳🇬]

Another nice trick you can add to your collection: If you want to specify headers that will be applied to all requests from all windows (global headers), you can specify them in the environments as well:

{
  "headers": {
    "Authorization": "Bearer abcf12345"
  }
}

One other one: customizing the theme of Altair using themeConfig in settings. :D