s-herbert / super-graphiql

SuperGraphiQL makes GraphQL API development faster, easier, and better.

Super-GraphiQL is a powerful yet simple GUI designed for testing your GraphQL API.

With Super-GraphiQL users are able to quickly setup a series of tests for GraphQL API, better understand the execution of queries and save test cases for easy reuse.

Getting Started

Express Middleware

To use Super-GraphiQL, install and incorporate the express middleware into your existing project with npm:

$ npm install --save super-graphiql-express

To use the express middleware, simply import the package into your server file and specify the HTTP endpoint and / or websocket endpoint of your GraphQL server. The SuperGraphiQL IDE will automatically be rendered at the '/supergraphiql' route and include support for GraphQL subscriptions.

const { supergraphiqlExpress } = require('super-graphiql-express');

app.use('/supergraphiql', 
supergraphiqlExpress({
  endpointURL: "/graphql",
  subscriptionsEndpoint: "ws://localhost:9999/subscriptions"
}));

React Component You can incorporate Super-GraphiQL into your existing project with npm:

$ npm install --save super-graphiql

SuperGraphiQL provides a React component responsible for rendering the GUI. The component must be provided with the graphQLFetcher function for fetching from GraphQL, we recommend using the fetch standard API.

import React from 'react';
import ReactDOM from 'react-dom';
import SuperGraphiQL from 'super-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());
}

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

Build the component into your existing project with webpack or browserify. Include the necessary CSS and Font Awesome script on your page.

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/super-graphiql@latest/super-graphiql.min.css" />

Features

Super-GraphiQL leverages components of GraphiQL under the hood but developed to be a more powerful and flexibile GraphQL IDE to enable a smooth and efficient testing workflow. Super-GraphiQL adds the following features to the GraphQL ecosystem:

• Supports multiple GraphQL queries and mutations in one test script
• Save and reuse test scripts including a searchable Query history
• Includes real world examples with NoSQL and SQL databases.

How to use?

• Build test scripts full of queries and test only the ones you need

• Search History to find the reusable queries

Packages

super-graphiql-express: Express middleware

super-graphiql-react: Core of Super Graphiql built with ReactJS

Authors

Albert Chen | Marissa Lafontant | Eduardo Maillo | Angela Scerbo

License

See LICENSE file