使用 GraphiQL IDE graphiql-ide

標準GraphiQL IDE的實作可與Adobe Experience Manager (AEM)的GraphQL API搭配使用。

NOTE
GraphiQL 包含在 AEM 的所有環境中 (但只有在您配定端點時才可存取/可見)。
在先前版本,需要套件來安裝 GraphiQL IDE。如果您已安裝,現在可以將其移除。
NOTE
您必須在設定瀏覽器設定您的端點,才能使用 GraphiQL IDE。

GraphiQL 工具可讓您透過以下方式對 GraphQL 查詢進行測試和偵錯:

  • 選擇適合您要用於查詢之 Sites 設定的​ 端點
  • 直接輸入新查詢
  • 建立和存取​ 持續性查詢
  • 執行查詢以立即檢視結果
  • 管理​ 查詢變數
  • 儲存和管理​ 持續性查詢
  • 發佈或取消發佈​ 持續性查詢 (例如,to/from dev-publish)
  • 查看您之前查詢的​ 歷史記錄
  • 使用​ 文件總管 ​以存取文件;協助您學習並了解可用的方法。

您可以從以下任一方式存取查詢編輯器:

  • 工具 > 一般 > GraphQL 查詢編輯器
  • 直接;例如 http://localhost:4502/aem/graphiql.html

GraphiQL 介面

您可以在您的系統上使用 GraphiQL,以便您的用戶端應用程式可以使用 GET 要求來要求查詢,和用於發佈查詢。如果是用於生產,您可以將查詢移至您的生產環境。最初是生產編寫以使用查詢驗證新編寫的內容,最後是生產發佈以供上線取用。

選取您的端點 selecting-endpoint

第一步,您必須選取您要用於查詢的​ 端點。此端點適合您要用於查詢的 Sites 設定。

這可以從右上角的下拉清單中取得。

建立並保留新查詢 creating-new-query

您可以在編輯器中輸入新查詢 - 它位於左側中間面板,GraphiQL 標誌正下方。

NOTE
如果您已經選取持續性查詢,並顯示在編輯器面板中,請選取 + (持續性查詢 旁邊) 以清空編輯器,為您的新查詢做好準備。

只要開始輸入,編輯器也會:

  • 使用游標懸停以顯示有關元素的其他資訊
  • 提供像是語法醒目提示、自動完成、自動建議等功能
NOTE
GraphQL 查詢通常以 { 字元開頭。
# 開頭的行將被忽略。

使用​ 另存新檔 ​保留您的新查詢。

更新持續性查詢 updating-persisted-query

從​ 持續性查詢 ​面板 (最左側) 的清單中選取要更新的查詢。

查詢會顯示在編輯器面板中。視需要進行變更,然後使用​ 儲存 ​將更新提交到持續性查詢。

執行查詢 running-queries

您可以立即執行新查詢,也可以載入並執行持續性查詢。若要載入持續性查詢,請從清單中選取 - 查詢會顯示在編輯器面板中。

在任何一種情況下,編輯器面板顯示的查詢,都是在您執行以下操作時會執行的查詢:

  • 按一下​ 執行查詢 ​圖示
  • 使用鍵盤組合 Control-Enter

查詢變數 query-variables

GraphiQL IDE 也讓您管理查詢變數

例如:

GraphQL 變數

發佈持續性查詢 publishing-persisted-queries

一旦您從清單(左面板)中選取了持久查詢,您就可以使用​ Publish ​和​ 取消發佈 ​動作。 這會將其啟動到發佈環境 (例如,dev-publish),以便應用程式在測試時輕鬆存取。

NOTE
持續性查詢快取 Time To Live {"cache-control":"parameter":value} 之定義的預設值為 2 小時 (7200 秒)。

複製 URL 以直接存取查詢 copy-url

複製 URL 選項可讓您複製用於直接存取持續性查詢的 URL,以模擬查詢並查看結果。然後可以將其用於測試;例如,在瀏覽器中存取:

例如:

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

在瀏覽器使用此 URL,您可以確認結果:

GraphiQL - 複製 URL

複製 URL ​選項可透過持續性查詢名稱右側的垂直三點存取 (最左側面板):

GraphiQL - 複製 URL

刪除持續性查詢 deleting-persisted-queries

刪除 ​選項也可透過持續性查詢名稱右側的垂直三點存取 (最左側面板)。

在生產環境中安裝持續性查詢 installing-persisted-query-production

使用 GraphiQL 開發和測試持續性查詢後,最終目標是將其傳送到生產環境以供應用程式使用。

鍵盤快速鍵 keyboard-shortcuts

有一系列鍵盤快速鍵可用來直接存取 IDE 中的動作圖示:

  • 修飾查詢:Shift-Control-P
  • 合併查詢:Shift-Control-M
  • 執行查詢:Control-Enter
  • 自動完成:Control-Space
NOTE
在某些鍵盤上,Control 鍵標記為 Ctrl
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2