Altair GraphQL Client

Altair is a beautiful feature-rich GraphQL Client IDE for all platforms. Available for MacOS, Windows, Linux, Chrome, Firefox. It enables you interact with any GraphQL server you are authorized to access from any platform you are on.

Much like Postman for GraphQL, you can easily test and optimize your GraphQL implementations.

Features

Altair provides several features that make developing with GraphQL very efficient and friendly. These features include:

setting headers
setting variables
creating environments
viewing response stats
viewing schema docs
advanced schema docs search
dynamically adding/generating queries and/or fragments from schema docs
file upload via GraphQL
autocompletion of queries
autofill all query fields at cursor
automatic schema refreshing using GraphQL Event Stream protocol
automatic refactoring of query
prerequest scripts
multiple windows, multiple languages
importing and exporting collections of queries
multiple themes
plugin system for extensibility
and many more features (really there's a lot more!).

See more here: https://altair.sirmuel.design/docs/features

Missing feature?

Is there a feature that is missing? You can let us know by creating a new issue or you can add the feature by creating a Pull Request.

Usage

For mac users, you can also install using cask:

$ brew cask install altair-graphql-client

For linux users, you can also install using snap:

$ snap install altair

For arch linux users, an AUR package aur/altair exists:

$ yay -S altair

For windows users, you can install using appget:

$ appget install altair-graphql

or chocolatey:

$ choco install altair-graphql

Usage with express

You can use altair with an express server using altair-express-middleware. Read more about how to use this here.

Usage with koa

You can use altair with a koa server using altair-koa-middleware. Read more about how to use this here.

Usage with Laravel (PHP)

You can use altair in a Laravel project using xkojimedia/laravel-altair-graphql:

$ composer require xkojimedia/laravel-altair-graphql

You can find other available integrations here: https://altair.sirmuel.design/docs/integrations

Configuration Options

When using a custom instance of Altair, there are couple of options you can use to customize Altair based on your needs:

endpointURL string - URL to set as the server endpoint
subscriptionsEndpoint string - URL to set as the subscription endpoint
initialQuery string - Initial query to be added
initialVariables string - Initial variables to be added (in JSON format) e.g. '{ "var1": "first variable" }'
initialPreRequestScript string - Initial pre-request script to be added e.g. 'altair.helpers.getEnvironment("api_key")'
initialHeaders IDictionary - Initial headers object to be added

{
  'X-GraphQL-Token': 'asd7-237s-2bdk-nsdk4'
}

initialEnvironments IInitialEnvironments - Initial Environments to be added

{
  base: {
    title: 'Environment',
    variables: {}
  },
  subEnvironments: [
    {
      title: 'sub-1',
      variables: {}
    }
  ]
}

instanceStorageNamespace string - Namespace for storing the data for the altair instance. Use this when you have multiple altair instances running on the same domain. e.g. 'altair_dev_'

Example usage:

AltairGraphQL.init({
  endpointURL: 'https://www.example.com/graphql',
  initialVariables: '{ "username": "imolorhe" }',
});

Supported Browsers

Altair has been tested in the latest versions of Google Chrome and Mozilla Firefox. It might not work as expected in other browsers like Safari and Edge.

Community 🙏🏾

You can learn more about how to get help here.

Contributing

Would you like to help with translations? https://altair-gql-translate.surge.sh/ Click here.

Learn more about contributing to Altair here and here.

Development

Run yarn start for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Build

Run yarn build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

Generate chrome extension files

Run yarn build-ext to build the chrome extension files. The extension files will be stored in the chrome-extension/ directory.

Generate electron app

Run yarn build-electron to build the electron apps. The apps will be stored in the electron-builds/ directory.

Updating docs

Run bundle exec jekyll serve.

Running tests

Run yarn test to execute the unit tests via Karma and the end-to-end tests via Protractor.

Contributors

This project exists thanks to all the people who contribute. [Contribute].

Backers

Thank you to all our backers! 🙏 [Become a backer]

License

More Contributors ❤️

Thanks goes to these wonderful people (emoji key):

_{Danilo Caruso} 🌍	_{Igor Szymanski} 🌍	_{Kevin Porten} 🌍	_{JongChan Choi} 🌍	_{Alexey Rodionov} 📖	_kurisutofu 🌍	_{Claércio Santos} 🌍
_jenda 🌍	_pcharbon70 🌍	_{Juan Cruz} 🌍	_{Victor Mihaita} 🌍	_{Furqan Anas} 📖	_{Vlad Shcherbin} 🐛	_{Serhiy Dmytryshyn} 🌍
_{Marco Lüthy} 💵