Skip to content

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.

Installation

macOS

If you have Homebrew installed on macOS:

brew cask install graphiql

Alternately, download the binary from the Releases tab.

Linux

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.

Windows

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. https://app.dev.yoli.ai/next/graphql) 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 {
  createMe
}
{
  "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

Docs

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

Debugging

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

History

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

History

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