@apollographql/graphql-playground-html

What is @apollographql/graphql-playground-html?

@apollographql/graphql-playground-html is a package that provides a way to embed GraphQL Playground, an interactive, in-browser GraphQL IDE, into your web applications. It allows developers to test and document their GraphQL APIs with ease.

What are @apollographql/graphql-playground-html's main functionalities?

Embedding GraphQL Playground

This feature allows you to embed the GraphQL Playground into your web application. The code sample demonstrates how to include the necessary script and initialize the playground with a specified GraphQL endpoint.

<script src="https://cdn.jsdelivr.net/npm/@apollographql/graphql-playground-html@latest/build/static/js/middleware.js"></script>
<div id="playground"></div>
<script>
  window.addEventListener('load', function (event) {
    GraphQLPlayground.init(document.getElementById('playground'), {
      endpoint: '/graphql'
    })
  })
</script>

Custom Configuration

This feature allows you to customize the configuration of the GraphQL Playground. The code sample shows how to set custom settings such as the editor theme and cursor shape.

<script src="https://cdn.jsdelivr.net/npm/@apollographql/graphql-playground-html@latest/build/static/js/middleware.js"></script>
<div id="playground"></div>
<script>
  window.addEventListener('load', function (event) {
    GraphQLPlayground.init(document.getElementById('playground'), {
      endpoint: '/graphql',
      settings: {
        'editor.theme': 'dark',
        'editor.cursorShape': 'line'
      }
    })
  })
</script>

Other packages similar to @apollographql/graphql-playground-html

graphql-playground

graphql-playground is a standalone GraphQL IDE that can be used as a desktop application or embedded in web applications. It offers similar functionalities to @apollographql/graphql-playground-html, including an interactive interface for testing and documenting GraphQL APIs. However, it is more versatile as it can be used both as a desktop app and an embedded tool.

graphiql

graphiql is another popular in-browser IDE for exploring GraphQL. It provides a simple and clean interface for running queries and mutations against a GraphQL endpoint. While it offers similar core functionalities, graphiql is known for its extensibility and integration capabilities with various GraphQL tools and libraries.

altair

altair is a feature-rich GraphQL client that provides an interactive interface for testing GraphQL queries and mutations. It offers advanced features such as query history, environment management, and support for multiple tabs. Compared to @apollographql/graphql-playground-html, altair provides a more comprehensive set of tools for managing and testing GraphQL APIs.

README

@apollographql/graphql-playground-html

NOTE: This is a fork of graphql-playground-html which is meant to be used by Apollo Server and only by Apollo Server. It is not intended to be used directly. Those looking to use GraphQL Playground directly can refer to the upstream repository for usage instructions.

SECURITY WARNING: Via the upstream fork, this package had a severe XSS Reflection attack vulnerability until version 1.6.25 of this package. While we have published a fix, users were only affected if they were using @apollographql/graphql-playground-html directly as their own custom middleware. The direct usage of this package was never recommended as it provided no advantage over the upstream package in that regard. Users of Apollo Server who leverage this package automatically by the dependency declared within Apollo Sever were not affected since Apollo Server never provided dynamic facilities to customize playground options per request. Users of Apollo Server would have had to statically embedded very explicit vulnerabilities (e.g., using malicious, unescaped code, <script> tags, etc.).