prismagraphql/graphql-playground

Name: graphql-playground

Owner: Prisma

Description: ? GraphQL IDE for better development workflows (GraphQL Subscriptions, interactive docs & collaboration)

Created: 2017-01-25 13:19:29.0

Updated: 2018-05-24 09:48:37.0

Pushed: 2018-05-23 23:47:12.0

Homepage:

Size: 4126

Language: TypeScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

GraphQL IDE for better development workflows (GraphQL Subscriptions, interactive docs & collaboration).
You can download the desktop app or use the web version at graphqlbin.com: Demo

Installation

ew cask install graphql-playground

Features

• ? Context-aware autocompletion & error highlighting
• ? Interactive, multi-column docs (keyboard support)
• ?? Supports real-time GraphQL Subscriptions
• ? GraphQL Config support with multiple Projects & Endpoints
• ? Apollo Tracing support

FAQ

How is this different from GraphiQL?

GraphQL Playground uses components of GraphiQL under the hood but is meant as a more powerful GraphQL IDE enabling better (local) development workflows. Compared to GraphiQL, the GraphQL Playground ships with the following additional features:

• Interactive, multi-column schema documentation
• Automatic schema reloading
• Support for GraphQL Subscriptions
• Query history
• Configuration of HTTP headers
• Tabs

See the following question for more additonal features.

What's the difference between the desktop app and the web version?

The desktop app is the same as the web version but includes these additional features:

• Support for graphql-config enabling features like multi-environment setups.
• Double click on *.graphql files.

How does GraphQL Bin work?

You can easily share your Playgrounds with others by clicking on the “Share” button and sharing the generated link. You can think about GraphQL Bin like Pastebin for your GraphQL queries including the context (endpoint, HTTP headers, open tabs etc).

You can also find the announcement blog post here.

Usage

Properties

All interfaces, the React component <Playground /> and all middlewares expose the same set of options:

• properties
• endpoint [string] - the GraphQL endpoint url.
• subscriptionEndpoint [string] - the GraphQL subscriptions endpoint url.
• setTitle [boolean] - reflect the current endpoint in the page title

As React Component

Install

 add graphql-playground-react

Use

GraphQL Playground provides a React component responsible for rendering the UI and Session management. There are 3 dependencies needed in order to run the graphql-playground-react React component.

1. Open Sans and Source Code Pro fonts
2. Including graphql-playground-react/playground.css
3. Rendering the <Playground /> component

The GraphQL Playground requires React 16.

Including Fonts (1.)

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

Including stylesheet and the component (2., 3.)

rt React from 'react'
rt ReactDOM from 'react-dom'
rt Playground from 'graphql-playground-react'
rt 'graphql-playground-react/playground.css'

tDOM.render(<Playground endpoint="https://api.graph.cool/simple/v1/swapi" />, document.body)

As Server Middleware

Install

ck the one that matches your server framework
 add graphql-playground-middleware-express  # for Express or Connect
 add graphql-playground-middleware-hapi
 add graphql-playground-middleware-koa
 add graphql-playground-middleware-lambda

Usage with example

We have a full example for each of the frameworks below:

• Express: See packages/graphql-playground-middleware-express/examples/basic

• Hapi: See packages/graphql-playground-middleware-hapi

• Koa: See packages/graphql-playground-middleware-koa

• Lambda (as serverless handler): See serverless-graphql-apollo or a quick example below.

As serverless handler

Install

 add graphql-playground-middleware-lambda

Usage

handler.js

rt lambdaPlayground from 'graphql-playground-middleware-lambda'
r using require()
onst lambdaPlayground = require('graphql-playground-middleware-lambda').default

rts.graphqlHandler = function graphqlHandler(event, context, callback) {
nction callbackFilter(error, output) {
// eslint-disable-next-line no-param-reassign
output.headers['Access-Control-Allow-Origin'] = '*';
callback(error, output);


nst handler = graphqlLambda({ schema: myGraphQLSchema });
turn handler(event, context, callbackFilter);


rts.playgroundHandler = lambdaPlayground({
dpoint: '/dev/graphql',

serverless.yml

tions:
aphql:
handler: handler.graphqlHandler
events:
- http:
    path: graphql
    method: post
    cors: true
ayground:
handler: handler.playgroundHandler
events:
- http:
    path: playground
    method: get
    cors: true

Development

This is a mono-repo setup containing packages for the graphql-playground-react and graphql-playground-electron.

stalls all dependencies for all packages
rn
 packages/graphql-playground-react
rn start

Open localhost:3000/middleware.html?endpoint=https://api.graph.cool/simple/v1/swapi for local development!

Versions

This is repository is a “mono repo” and contains multiple packages using Yarn workspaces. Please be aware that versions are not synchronised between packages. The versions of the release page refer to the electron app.

Packages

In the folder packages you'll find the following packages:

• graphql-playground-electron: Cross-platform electron app which uses graphql-playground-react
• graphql-playground-html: Simple HTML page rendering a version of graphql-playground-react hosted on JSDeliver
• graphql-playground-middleware-express: Express middleware using graphql-playground-html
• graphql-playground-middleware-hapi: Hapi middleware using graphql-playground-html
• graphql-playground-middleware-koa: Koa middleware using graphql-playground-html
• graphql-playground-middleware-lambda: AWS Lambda middleware using graphql-playground-html
• graphql-playground-react: Core of GraphQL Playground built with ReactJS

Help & Community

Join our Slack community if you run into issues or have questions. We love talking to you!