使用 GraphiQL IDE graphiql-ide

标准GraphiQL IDE的实施可与Adobe Experience Manager (AEM)的GraphQL API一起使用。

GraphiQL 工具让您测试和调试 GraphQL 查询，方法是：

您可以通过以下任一方式访问查询编辑器：

您可以在系统上使用 GraphiQL，以便您的客户端应用程序可以使用 GET 请求来请求查询，并发布查询。对于生产使用，您可以将查询移动到生产环境。最初是移至生产作者环境，以供通过查询来验证新撰写的内容，最后移至生产发布环境，以供实时使用。

选择您的端点 selecting-endpoint

第一步，您需要选择您想用于查询的​ 端点。该端点适用于您要用于查询的 Sites 配置。

这可以从右上角的下拉列表中获得。

创建并持久新查询 creating-new-query

您可以在编辑器中输入新查询，该编辑器位于左中面板的 GraphiQL 徽标正下方。

只要开始输入，编辑器还会：

使用​ 另存为 ​来保存新查询。

正在更新您的持久查询 updating-persisted-query

从​ 持久查询 ​面板（最左边）的列表中选择要更新的查询。

查询会显示在编辑器面板中。进行任何需要的更改，然后使用​ 保存 ​将更新提交到持久查询。

正在运行查询 running-queries

您可以立即运行新查询，或者加载并运行持久查询。要加载持久查询，请从列表中选择它，查询会显示在编辑器面板中。

在两种情况下，编辑器面板中显示的查询都是在以下情况下执行的查询：

查询变量 query-variables

GraphiQL IDE 还让您管理查询变量。

例如：

正在发布持久查询 publishing-persisted-queries

一旦从列表（左面板）中选择了持久查询，您就可以使用​ Publish ​和​ 取消发布 ​操作。 这会将它们激活到您的发布环境（例如，dev-publish），以便您的应用程序在测试时轻松访问。

复制 URL 以直接访问查询 copy-url

“复制 URL” ​选项让您通过复制用于直接访问持久查询并查看结果的 URL 来模拟查询。然后可以将其用于测试；例如，通过在浏览器中访问：

例如：

http://localhost:4502/graphql/execute.json/global/article-list-01

通过在浏览器中使用此 URL，可以确认结果：

“复制 URL” ​选项可通过持久查询名称右侧的三个垂直点访问（最左侧面板）：

正在删除持久查询 deleting-persisted-queries

“删除” ​选项也可通过持久查询名称右侧的三个垂直点访问（最左侧面板）：

正在生产环境中安装您的持久查询 installing-persisted-query-production

在使用 GraphiQL 开发和测试您的持久查询之后，最终目标是将其转移到生产环境中，供应用程序使用。

键盘快捷键 keyboard-shortcuts

有多种键盘快捷键可供直接访问 IDE 中的操作图标：