Altair GraphQL Client vs GraphiQL

Altair GraphQL Client is an IDE for running and debugging GraphQL queries, mutations and subscriptions. It formats queries, supports file uploads using the multipart specification, and can export query collections. Users can set environment variables for endpoints, headers and queries, then browse schema types and operations in a documentation explorer. Pre-request and post-request scripts and an extensible plugin system add customization options. Altair GraphQL Cloud provides centralized query management, collections, query versioning and shareable query URLs. Official integration packages include Express middleware, Koa middleware, a static build and a Gatsby plugin. The free Basic plan lists up to two team members and 20 queries; Pro costs $7.99 a month per user and lists unlimited team members, teams and queries. The client is available as a web app and on desktop platforms, including Linux, macOS and Windows, with extension and self-hosted options. The maker says the web app is for quick or one-time use, not full development, because it has limitations. Documentation warns that introspection can expose an API schema and that Content Security Policy support is beta.

GraphiQL is a free, interactive, in-browser IDE for GraphQL. Its editor supports the latest GraphQL specification, with syntax highlighting, type-aware suggestions, query and variable completion, and real-time error highlighting. A searchable documentation explorer can display Markdown, and the built-in query history and documentation explorer are available as plugins. GraphiQL can preserve state in browser localStorage and provides a plugin API for extending its interface. It is also a React package for embedding the IDE in an application; a component needs a fetcher function that sends requests to a GraphQL API. The toolkit fetcher supports HTTP, multipart incremental delivery, and subscriptions through graphql-ws or the legacy WebSocket protocol. Developers can customize the interface with React props and children, while CSS variables are the supported way to change its appearance. GraphiQL is open source under the MIT license. Its project offers a progressive web app demo and examples for CDN, Webpack, Create React App, and Parcel.