GraphiQL App 🔥

GraphiQL App

GraphiQL is a light, Electron-based wrapper around GraphiQL. Provides a tabbed interface for editing and testing GraphQL queries/mutations with GraphiQL.



If you have Homebrew installed on macOS:

brew cask install graphiql

Alternately, download the binary from the Releases tab.


The graphiql-app uses the AppImage format for its Linux version. You download it from the Electron app directory (click the "Download for Linux"-button) or from the Releases tab.

Either way, you will get a .AppImage binary. Put it in a safe place and make it executable:

chmod +x graphiql-app-0.7.2-x86_64.AppImage

Then simply execute the app. It will ask whether to add shortcuts to your desktop and menus for easy access in the future.


To install GraphiQL App on Windows go to Electron, where you can find a windows installer. Once downloaded, execute the installer and let the installation wizard guide you through the installation.

Getting Started

Enter an Enpoint

After installation the first step is to enter a proper endpoint (i.e. in the appropiate field.

GraphQL Endpoint

Note: next/graphql is an ordinary HTTP endpoint that always returns a 200 HTTP status code, even if there is an error.

Get Access Token

First you have to execute the createMe mutation, which returns the initial refresh token you need.

mutation {
  "data": {
    "createMe": "<refresh token>"

Next generate an access token with with the getAccessToken query.

  getAccessToken(refreshToken: "<refresh token>", expiresIn: 1337)
  "data": {
    "getAccessToken": "<access token>"

Use Access Token

Click on the "Edit HTTP Headers" button in the upper right corner to edit header. Here you have to set the provided access token as the authorization header. You will receive an error (a 401 HTTP status code) if you token is invalid/expired.

HTTP Header


The right-hand pane exists for you to explore the possible queries, mutations, fields and their types, if they’re required. Just hit "Docs" on the right to explore the Yoli schema. The prerequisite for this is the input of a valid end point.

Yoli Docs


You don't even have to read the documentation to discover the Yoli schema. GraphiQL supports debugging as-you-type, giving hints and points out error.

GraphiQL Hint

GraphiQL Error

But if you enter a correct query or mutation hit the Play button above to see a result.

JSON Viewer

GraphiQL comes with a JSON viewer with all the niceties you’d expect: code folding, automatic indentation, copy support, and read-only so you won’t accidentally delete or edit.

GraphiQL Json Viewer


Click on the "History" button it will open a left-hand pane with a list of all previously executed queries or mutations.


If you double-click on any entry, the current query or mutation will be replaced.