Getting Started

Install

GraphQL Explorer allows to visually navigate a graphql schema and fire mutations from autogenerated forms. The initial set-up is easy and requires few steps.

  yarn add graphql-explorer

You will need to import the required CSS files. Depending on whether you are already importing Bootstrap or not in your application, you can import two different stylesheets

// if your app has not imported bootstrap alreadyimport 'graphql-explorer/styles/style.css';// if you are already importing bootstrap somewhere elseimport 'graphql-explorer/styles/style-no-bootstrap.css';

note

Graphql Explorer uses bootstrap 4. using another version of bootstrap or another CSS library might interfere with the correct rendering of the components

Configure

Let's look at how to configure the basic options for GraphQL Explorer. In order to create a configuration, you need to have two objects:

• a GraphQLSchema object
• an ApolloClient object

You can consult the respective recommendation on how to create such objects. Then you can import and initialize the ExplorerConfiguration Class:

import { ExplorerConfiguration } from 'graphql-explorer';
let schema: GraphQLSchema;let client: ApolloClient;
const configuration = new ExplorerConfiguration(schema, client);

Integrate

Now the only thing left is to build and mount the main Explorer component:

import { Explorer } from 'graphql-explorer';
function MyApp({ configuration }) {  return (    <div>      <Explorer config={configuration} />    </div>  )}

that's it! Explore the rest the documentation to learn how to customize the various components of GraphQL Explorer.