Gatsby Starter Graphql Playground

Overview

GraphQL Playground is a powerful tool for showcasing GraphQL queries and documentation. It allows users to write queries and documentation using MDX and display the queries in an interactive GraphiQL window. The tool can source data from either a localhost or a remote URL. It utilizes the Gatsby Theme @lekoarts/gatsby-theme-graphql-playground.

Features

• MDX for navigation and content: Use MDX to create and modify the navigation and content.
• Automatic conversion of code blocks: GraphQL code blocks with the meta field preview are converted to live previews in a GraphiQL iframe.
• Theme UI-based theming: Customize the appearance of the playground using Theme UI-based theming.
• Light Mode / Dark Mode: Toggle between light and dark themes for the playground.

Installation

1. Create a Gatsby site using the Gatsby CLI and install dependencies:

   gatsby new my-site https://github.com/lekoarts/gatsby-starter-graphql-playground
   cd my-site
   

2. Navigate to the root directory of your new project.
3. Open the code and start customizing.
4. Start the site by running npm run develop.
5. Your site is now running at http://localhost:8000.

For more detailed instructions on customizing and using the starter, refer to the tutorial provided.

Summary

GraphQL Playground is a powerful tool that allows users to showcase their GraphQL queries and documentation. With features like MDX support, automatic conversion of code blocks, and flexible theming options, it provides an interactive and versatile environment for developers. By utilizing the Gatsby Theme @lekoarts/gatsby-theme-graphql-playground, users can easily create and customize their own GraphQL playground.