Install mdbook-preprocessor-graphql-playground
cargo install mdbook-preprocessor-graphql-playground
Add to book.toml
:
[preprocessor.graphql-playground]
command = "mdbook-graphql-playground"
renderer = ["html"]
[output]
[output.html]
additional-js = ["graphql-playground-react-middleware.js", "graphql-playground.js"]
additional-css = ["graphql-playground.css"]
Copy assets into the book root directory:
cp assets/graphql-playground.css <book_dir>
cp assets/graphql-playground.js <book_dir>
cp assets/graphql-playground-react-middleware.js <book_dir>
cp assets/images/* <book_dir>/src/images/
Create a query file
mkdir -p <book_dir>/queries/swapi
nano <book_dir>/queries/swapi/all-planets.query.graphql
Create a config file
mkdir <book_dir>/configs
nano <book_dir>/configs/swapi.json
Embed the GraphQL Playground in your markdown files
{{ graphql_playground(config="/configs/swapi.json") }}
You can have multiple queries
query AllPlanetsQuery {
allPlanets {
planets {
name
diameter
}
}
}
You can have multiple config files
You can have multiple tabs, each refers to a query
{
"title": "The Star Wars API",
"description": "Explore the star wars API using mdbook-preprocessor-graphql-playground",
"endpoint": "https://swapi-graphql.netlify.app/.netlify/functions/index",
"tabs": [
{
"name": "All Planets",
"url": "/queries/swapi/all-planets.query.graphql"
}
]
}
Embed with the graphql_playground
function
Specify the location of the config file with the config
parameter
{{ graphql_playground(config="/configs/swapi.json") }}