graphiql

What is graphiql?

The 'graphiql' npm package is an in-browser IDE for exploring GraphQL. It allows developers to interactively build and test GraphQL queries, mutations, and subscriptions. It provides a user-friendly interface with features like syntax highlighting, intelligent type-ahead, and documentation explorer.

What are graphiql's main functionalities?

Interactive Query Building

This feature allows users to build and test GraphQL queries interactively. The code sample demonstrates how to set up GraphiQL with a custom fetcher function to interact with a GraphQL endpoint.

const React = require('react');
const ReactDOM = require('react-dom');
const GraphiQL = require('graphiql');
const fetch = require('isomorphic-fetch');

function graphQLFetcher(graphQLParams) {
  return fetch('https://my-graphql-endpoint.com/graphql', {
    method: 'post',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(graphQLParams),
  }).then(response => response.json());
}

ReactDOM.render(
  React.createElement(GraphiQL, { fetcher: graphQLFetcher }),
  document.getElementById('graphiql')
);

Syntax Highlighting and Intelligent Type-Ahead

GraphiQL provides syntax highlighting and intelligent type-ahead, making it easier to write and understand GraphQL queries. The code sample shows the basic setup, which includes these features by default.

const React = require('react');
const ReactDOM = require('react-dom');
const GraphiQL = require('graphiql');
const fetch = require('isomorphic-fetch');

function graphQLFetcher(graphQLParams) {
  return fetch('https://my-graphql-endpoint.com/graphql', {
    method: 'post',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(graphQLParams),
  }).then(response => response.json());
}

ReactDOM.render(
  React.createElement(GraphiQL, { fetcher: graphQLFetcher }),
  document.getElementById('graphiql')
);

Documentation Explorer

The Documentation Explorer feature allows users to browse the schema documentation directly within the GraphiQL interface. This helps in understanding the available types, queries, and mutations.

const React = require('react');
const ReactDOM = require('react-dom');
const GraphiQL = require('graphiql');
const fetch = require('isomorphic-fetch');

function graphQLFetcher(graphQLParams) {
  return fetch('https://my-graphql-endpoint.com/graphql', {
    method: 'post',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(graphQLParams),
  }).then(response => response.json());
}

ReactDOM.render(
  React.createElement(GraphiQL, { fetcher: graphQLFetcher }),
  document.getElementById('graphiql')
);

Other packages similar to graphiql

apollo-server

Apollo Server is a community-driven, open-source GraphQL server that works with any GraphQL schema. It provides a simple setup for creating a GraphQL server and includes features like schema stitching, caching, and performance monitoring. Unlike GraphiQL, which is an IDE, Apollo Server focuses on the server-side implementation of GraphQL.

graphql-playground

GraphQL Playground is another in-browser IDE for GraphQL, similar to GraphiQL. It offers a more modern interface and additional features like query history, configuration settings, and multiple tabs. It is often used as a replacement for GraphiQL in many projects.

altair

Altair is a feature-rich GraphQL client that provides a clean and modern interface for testing GraphQL queries and mutations. It includes features like query history, variable management, and file uploads. Altair is similar to GraphiQL but offers more advanced features and a more polished user experience.

README

GraphiQL

/ˈɡrafək(ə)l/ An interactive in-browser GraphQL IDE.

Getting started

npm install --save graphiql

GraphiQL provides a React component responsible for rendering the UI, which should be provided with a function for fetching from GraphQL, we recommend using the fetch standard API.

import React from 'react';
import GraphiQL from 'graphiql';
import fetch from 'isomorphic-fetch';

function graphQLFetcher(graphQLParams) {
  return fetch(window.location.origin + '/graphql', {
    method: 'post',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(graphQLParams),
  }).then(response => response.json());
}

React.render(<GraphiQL fetcher={graphQLFetcher} />, document.body);

Build for the web with webpack or browserify, or use the pre-bundled graphiql.js file. See the example in the git repository to see how to use the pre-bundled file.

Features

• Syntax highlighting
• Intelligent type ahead of fields, arguments, types, and more.
• Real-time error highlighting and reporting.
• Automatic query completion.
• Run and inspect query results