使用 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 中的動作圖示：