mdbook-preprocessor-graphql-playground

为mdbook添加GraphQL玩场的预处理程序。

演示

https://aschaeffer.github.io/mdbook-preprocessor-graphql-playground/

用法

1. 安装 mdbook-preprocessor-graphql-playground

   cargo install mdbook-preprocessor-graphql-playground
   

2. 添加到 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"]
   

3. 将资产复制到书籍根目录

   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/
   

4. 创建一个查询文件

   mkdir -p <book_dir>/queries/swapi
   nano <book_dir>/queries/swapi/all-planets.query.graphql
   

5. 创建一个配置文件

   mkdir <book_dir>/configs
   nano <book_dir>/configs/swapi.json
   

6. 在markdown文件中嵌入GraphQL Playgound

   {{ graphql_playground(config="/configs/swapi.json") }}
   

查询文件

• 你可以有多个查询

query AllPlanetsQuery {
  allPlanets {
    planets {
      name
      diameter
    }
  }
}

配置文件

• 你可以有多个配置文件
• 你可以有多个标签，每个标签都对应一个查询

{
  "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"
    }
  ]
}

在书中使用配置

1. 使用graphql_playground函数嵌入
2. 使用config参数指定配置文件的路径

{{ graphql_playground(config="/configs/swapi.json") }}

示例

一个完整的示例可以在这个仓库中找到