GraphQL Playground on the Front with React

You may add GraphQL Playground to a front end application by GraphQL Playground React component. To use GraphQL Playground as a react component, you should use the graphql-playground-react. You may add configurations like endpoint as a GraphQL Playground React component props, you can set subscription endpoint by setting subscriptionEndpoint, set setTitle to true if you want to reflect the current endpoint in the page title, and set GraphQL configuration with the graphqlConfig component and in case you provide a GraphQL configuration, you can set your workspace to workspaceName.

A GraphQL Playground react component requires React 16, and also requires to be wrapped up in the code.

NOTE:Earlier versions of 1.7.28 has security issues, like ensuring that user-generated HTML is safe, so use the version of graphql-playground-react 1.7.28 or later.

Example of GraphQL Playground with React

You need react installed on your computer for this example.

In cmd, type following line by line to create a react project

mkdir graphql-playground-react-project
cd graphql-playground-react-project
npx create-react-app .

Now you have a graphql-playground-react-project react project. As it has been mentioned before, the GraphQL Playground requires React 16, so we will install react 16 and react-dom 16.

In cmd, type

npm install --save react@16.14.0 react-dom@16.14.0 

Now we will download graphql-playground-react to use the GraphQL Playground react component.

In cmd, type

npm i graphql-playground-react

Since we installed React 16, we should make some changes on index.js and we should add a GraphQL Playground react component in app.js.

Open index.js in src folder of your application, and paste this code:

import React from 'react';
import ReactDOM from 'react-dom'; 
import App from './App'; 

ReactDOM.render( 
    <App /> ,
  document.body,
);

Open app.js in src folder of your application, and paste this code:

import { Playground, store } from 'graphql-playground-react';
import { Provider } from 'react-redux';

function App() {
  return (
    <Provider store={store}>
       <Playground endpoint=“https://api.graph.cool/simple/v1/swapi”>
    </Provider>
  );
}
export default App;

In here, we used a <Provider> component from Redux to wrap GraphqL Plaground React component up.

Open index.html in public folder of your application, and paste this code inside the head tag:

<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Source+Code+Pro:400,700" rel="stylesheet" /

It will give buffer error.

In cmd, type

npm install --save buffer

To start the application

In cmd, type

npm start 

Now you have a basic application that uses the GraphQL Playground as a React component.

The example app

GraphQL Playground is a powerful GraphQL IDE which is a graphical, interactive, and in-browser, that enables development workflows and increases developer productivity. It is a form of user interface that visualizes your GraphQL queries and requests. It allows you to get data by a request to the URL you have provided, understand the response of the query you’ve written, and use many features to ease your job related to GraphQL requests other than just writing GraphQL queries. These features will be told in this article later.