GraphiQL 客户端入门

Gato GraphQL 提供 GraphiQL 客户端，用于与 GraphQL 服务进行交互。点击插件菜单中的「GraphiQL」即可访问：

GraphiQL 支持编写 GraphQL queries、执行它们并查看响应结果：

​

GraphiQL 客户端使用指南

以下介绍如何使用 GraphiQL 客户端来编写和执行 GraphQL query。

我们在左侧面板中编写 GraphQL query：

GraphiQL 内置了针对 GraphQL 语法的语法高亮功能。在编写 query 时，操作名称、开闭括号、字段、参数、指令和注释都会以不同颜色显示，帮助我们理解 query 的结构：

首次加载时，GraphiQL 会通过 introspection 获取 GraphQL schema 的元数据。借助 schema 元数据，在编写 query 的任意时刻，GraphiQL 都会提示自动补全选项：

我们也可以通过文档浏览器（Documentation Explorer）来查看 schema 元数据。点击「Docs」按钮即可打开：

文档浏览器将显示在右侧：

点击 GraphQL 类型的名称后，文档浏览器将显示其相关信息：

• 类型的描述
• 它所实现的接口
• 所有字段的列表，包括：
  • 字段接收的参数
  • 字段的返回类型（也可以点击进入查看详情）
  • 字段的描述

随时可以搜索 schema 中的任意元素并获取相关信息：

将鼠标悬停在 query 中的任意元素上会显示其信息，ctrl（或 cmd）+ 点击则会在文档浏览器中显示该元素：

点击底部的「Query variables」面板，可以以 variable => value 的 JSON 映射格式输入要传递给 query 的变量：

要执行 GraphQL query，按「Run」按钮，或按 ctrl（或 cmd）+ enter：

GraphQL 响应结果将显示在中央面板中：

顶部面板中有适用于 GraphiQL 的各种插件：

点击各插件按钮将执行相应的操作：

• 「Prettify」格式化 GraphQL query
• 「History」显示最近历史 queries 的列表，点击其中任一条目即可将其输入到 query 编辑器中
• 「Explorer」打开 GraphiQL Explorer 面板

GraphiQL Explorer 是一个非常实用的插件。它显示所有字段的列表，点击字段即可将其添加到编辑器中的 query，从而以可视化的方式编写 GraphQL query：