GraphQL 是一种查询语言，旨在提高 API 的效率和可发现性。GraphQL的优势在于前端能够为数据获取到自己所需要的部分，而不需要额外的网络请求。GraphQL Voyager 通过创建一个交互式的可视化图表，提供了对GraphQL服务的可视化探测。
在本文中，我们将介绍如何使用 npm 包 graphql-voyager 来探索 GraphQL schema。
安装和配置
我们使用 npm 包 graphql-voyager 来探索 GraphQL schema。在项目中安装 graphql-voyager 依赖：
npm install graphql-voyager --save-dev
完成安装后，我们需要在项目中添加一个命令来启动 GraphQL Voyager。
在 package.json 中添加以下命令：
{ "scripts": { "start": "graphql-voyager --endpoint=http://localhost:4000/graphql" } }
其中 --endpoint 参数设置了 GraphQL 服务的 endpoint 地址，具体使用时应该根据实际服务地址修改。
现在，我们可以在项目中运行以下命令来启动 GraphQL Voyager：
npm run start启动完成后，会在浏览器中打开 GraphQL Voyager 应用，通过该应用便可开始探索 GraphQL schema 了。
控制面板
GraphQL Voyager 提供了一个控制面板，使我们可以控制数据的层级菜单、字段和关系的显示方式。
首先，在控制面板的Schema标签下，我们可以切换 schema 模式、选择要探索的 schema 和设置根节点。
其次，在Display标签下，我们能够控制不同节点数据的显示方式、不分段的粘贴行数、字符大小和颜色、节点标签等等。
我们还可以在控制面板中切换到Docs标签页，查看 GraphQL API 的类型定义和注释信息。
示例
假设我们有一个示例 GraphQL API，能够查询用户数据，比如用户名、年龄、电子邮件等。我们将展示如何使用 GraphQL Voyager 来查询其中的用户数据。
首先，我们在浏览器中打开 GraphQL Voyager 应用。点击 Root 节点，然后从下拉列表中选择 API 的 schema、并选择我们的 users 查询。
在 Root 节点下方，我们可以看到一个名为 users 的节点。点击节点，右侧的面板中将显示查询参数和返回的数据。
我们可以在查询参数中添加一段 GraphQL 查询语句：
{ users { name age email } }
在右侧的面板中就会显示返回的用户数据。
结论
本文介绍了如何使用 npm 包 graphql-voyager 来探索 GraphQL schema。我们通过安装和配置 graphql-voyager 依赖，启动 GraphQL Voyager 应用并在控制面板中控制数据的层级菜单、字段和关系的显示方式。
最后，我们演示了如何查询一个示例用户数据的 GraphQL API。GraphQL Voyager 是一个非常有用的工具，可以让前端工程师轻松地理解 GraphQL API，并且轻松发现不同 API 的 schema 形式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb4cdb5cbfe1ea0611362
