GraphQL Playground as a HTML Page

Setting up GraphQL Playground

You have many options for setting up GraphQL Playground. You may set the GraphQL Playground up to use as a desktop application, use it as a module like a react component to a front-end project or a middleware server to a back-end project, or you may use it online by using any of its online demos....

Features of GraphQL Playground

The GraphQL Playground is based on GraphiQL. It has a lot of features with the features of GraphiQL. GraphQL has query history feature means that GraphQL queries in GraphQL Playground are kept under query history and you can view query history with the history button....

GraphQL Playground as a HTML Page

To use GraphQL Playground as a html page, you can simply render the Playground HTML in a simple html page or in a html page with full loading animation by a CDN. You can add the GraphQL Playground to your html file by adding...

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....

GraphQL Playground on the Backend with Node

You can add GraphQL Playground as a module to your backend project, as a server middleware. To use the GraphQL Playground on the backend with Node, you can use express, hapi, koa or lambda....

Conclusion

GraphQL Playground is one of GraphQL IDE that is a graphical user interface and provides a lot of features. You can use GraphQL Playground as a desktop app, as a basic HTML page, as a front end module, as a back end module or as online demo. You can configure settings and use tabs to execute graphql queries, and use many features that are told in this article....