Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
src
utils
.npmignore
CHANGELOG.md
README.md
gatsby-config.js
gatsby-node.js
index.js
package.json

README.md

Gatsby Theme

@lekoarts/gatsby-theme-graphql-playground

@lekoarts/gatsby-theme-graphql-playground is released under the MIT license. Current npm package version. Downloads per month on npm. Total downloads on npm. PRs welcome! Follow @lekoarts_de

GraphQL Playground to showcase the power of GraphQL. Write your queries and documentation with MDX and display queries in an interactive GraphiQL window. It can source from your localhost or a remote URL (e.g. Codesandbox).

Live Preview

Read the Source Code.

Also be sure to checkout other Free & Open Source Gatsby Themes

Features

  • MDX for the navigation and content
  • Automatically converts GraphQL code blocks with the meta field preview to live previews in a GraphiQL iframe
  • Theme UI-based theming
  • Light Mode / Dark Mode

Installation

npm install @lekoarts/gatsby-theme-graphql-playground

Install as a starter

This will generate a new site that pre-configures use of the theme.

gatsby new graphql-playground LekoArts/gatsby-starter-graphql-playground

View the starter's code

Usage

Theme options

Key Default Value Description
basePath / Root url for the theme
docsPath docs Location of navigation.mdx and the individual doc pages. It's recommended to place these doc pages into /<docsPath>/items for a better overview
mdx true Configure gatsby-plugin-mdx (if your website already is using the plugin pass false to turn this off)

Example usage

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `@lekoarts/gatsby-theme-graphql-playground`,
      options: {
          docsPath: `playground`
        }
      }
    }
  ]
};

Additional configuration

In addition to the theme options, there are a handful of items you can customize via the siteMetadata object in your site's gatsby-config.js

// gatsby-config.js
module.exports = {
  siteMetadata: {
    // Used for the title template on pages other than the index site
    siteTitle: `GraphQL Playground`,
    // Default title of the page
    siteTitleAlt: `GraphQL Playground - @lekoarts/gatsby-theme-graphql-playground`,
    // Can be used for e.g. JSONLD
    siteHeadline: `GraphQL Playground - Gatsby Theme from @lekoarts`,
    // Will be used to generate absolute URLs for og:image etc.
    siteUrl: `https://gatsby-theme-graphql-playground.netlify.com`,
    // Used for SEO
    siteDescription: `Stub description for graphql-playground`,
    // Will be set on the <html /> tag
    siteLanguage: `en`,
    // Used for og:image and must be placed inside the `static` folder
    siteImage: `/banner.jpg`,
    // Twitter Handle
    author: `@lekoarts_de`,
    // Will be the root URL for the iFrame
    graphiQLUrl: `https://711808k40x.sse.codesandbox.io/___graphql`
  }
};

Shadowing

Please read the guide Shadowing in Gatsby Themes to understand how to customize the this theme! Generally speaking you will want to place your files into src/@lekoarts/gatsby-theme-graphql-playground/ to shadow/override files.

Adding content

Adding a new doc page

First, create a new entry in your navigation.mdx file. If this file doesn't exist yet, create it inside your docsPath (default: docs) folder.

You need to create a "classic" markdown list, like:

- Welcome
- Basics
  - [GraphQL Introduction](/graphql-introduction)

You'll now see a navigation that has two sections (Welcome and Basics) of which Basics has a sub-menu.

Now, create a new file at docs/items/graphql-introduction.mdx. The filename has to be the same as the link you used in the navigation. Add a title to the frontmatter of the MDX file and place the GraphQL query you wish to display in the GraphiQL iFrame as the first item.

---
title: GraphQL Introduction
---

```graphql preview
{
  ...your
  query
  goes
  here
}
```

Normal text can go here.

## Normal markdown too

You need to write your query with graphql preview so that the theme can pick it up. You also must place it directly after the frontmatter.

Changing the "Homepage" text

Create a file at src/@lekoarts/gatsby-theme-graphql-playground/text/index.mdx to edit the text.

🌟 Supporting me

Thanks for using this project! I'm always interested in seeing what people do with my projects, so don't hesitate to tag me on Twitter and share the project with me.

Please star this project, share it on Social Media or consider supporting me on Patreon!

If you want to hire me for contract/freelance work, you can do so! Get in touch with me!

You can’t perform that action at this time.