GraphiQL 是 GraphQL 基金會下的一個開源項目。它是一個基于 Web 的工具，允許您編寫具有自動完成的 GraphQL 查詢，然后針對生產 API 執行這些查詢。
Shopify 提供了一個打包為應用程序的 GraphiQL 版本，可以安裝到 Shopify 商店。此版本具有內置的幫助程序，用于向 Shopify 管理員 API 進行身份驗證，因此無需任何復雜的設置即可輕松測試對實時數據的查詢。
通過輸入測試商店的名稱來選擇應用的安裝位置。
如果你按照我們的建議使用開發人員商店，請隨意選擇任意數量的范圍，以便你可以嘗試本研討會中未涵蓋的其他查詢和變更。至少，請確保選擇要讀取和寫入產品的范圍。
安裝該應用程序后，您會看到它嵌入在你的商店管理儀表板中。
請考慮將應用固定到導航菜單，以便以后輕松訪問。
這里對 Shopify 管理員 API 運行查詢作為例子。
需要對確保在 GraphiQL 頂部選擇了 API 架構以及 Admin (Latest) API 版本。
選擇架構后，我們可以查詢商店的名稱。在 GraphiQL 的左側輸入以下查詢，確保覆蓋可能已經存在的任何內容。
示例中，第一個術語定義了我們要調用的特定查詢 –?shop?。GraphQL 和 REST 之間的主要區別之一是 GraphQL 要求您指定要檢索的確切字段。在本例中，Shop 對象包含許多字段，我們只指定了要返回的?name?字段。
要運行查詢，請按 GraphiQL 左上角的大三角形“播放”按鈕。
在右側看到一個帶有您商店名稱的JSON對象。響應將始終是一個 JSON 對象，可以在屬性中找到特定于響應的數據。
可以通過在同一查詢中的新行上指定所需的字段來返回更多數據。例如，我們還可以查詢?contactEmail?and?url?我們的商店。你會發現，邊輸入查詢字段時，右側會自動返回查詢的數據。
使用 GraphiQL 時，您可以使用?CTRL+Space?查看所有可用字段。除了有關 Shopify.dev 的文檔外，您還可以使用屏幕右側的文檔資源管理器查看更多信息。
目前，我們的查詢僅返回我們查詢的基?Shop?對象上的字段，這類似于與數據庫中的特定對象或者叫相關的 REST?表。但是，在 GraphQL API 中，我們通常有許多對象是鏈接的，可以一起查詢。
查詢通常與從各種連接的對象類型中讀取的字段深度嵌套在一起。構建檢索復雜數據結構的查詢的能力是 GraphQL 的強大功能。
如果我們使用 REST API，我們將需要執行許多 API 調用來檢索所有連接的數據，但是在 GraphQL 中，我們只需一次即可完成。
現在我們已經介紹了如何查詢嵌套對象，然后嘗試查詢對象列表。以使用?products?查詢為例，但如果以按 shop?的寫法去寫 product?，會報錯，是因為?products?查詢返回結果?ProductConnection?，而不僅僅是我們預期的?Product?對象列表。
必須要更正為這樣的寫法才會返回正確的數據：
在 GraphQL 中，一個?Connection?（就像從查詢中返回的?products?那個一樣）是一個特殊的包裝器，它允許我們以安全的方式查詢對象列表。
它 Connection 提供了額外的邏輯，允許在限制范圍內的查詢數量，之后才會返回數據。例如，我們可以將查詢限制為前五個結果，然后我們可以對接下來的五個結果執行另一個查詢，依此類推。這是一種基于“分頁”的查詢。
你需要知道，在 GraphQL 查詢中使用 時?Connection?，是不會返回對象列表的，而是會返回一個“多個對象或多個表共同的”查詢列表。用過?node.js?的對這種查詢應該不會陌生。
在查詢時，我們可以在調用中包含一個?query?參數?products.
這樣的查詢將會返回?product_type?為 top 的數據。
上面的例子中同時包含了limit 和 query 參數，因此它最多會返回 5 個項目.
命名查詢是使用比較多的查詢方式，因為這種查詢允許我們創建查詢變量，并且還可以更輕松地調試。
將上面的例子，重寫為一個命名查詢。使其具有一個名稱，并接受兩個查詢變量。
首先將查詢的名稱命名為?topProducts?，并引入兩個變量：?numberOfProducts?和?queryParams
你會發現這很像是一個函數，可以傳遞變量。
當指定參數時，我們需要包含數據類型。
在這個例子中， 參數數據有兩個類型String 和Int! numberOfProducts 的參數是必需的，而 queryParams 缺少是可選的。
我們需要做的最后一件事就是給我們的變量賦值。
在 GraphiQL 中，我們通過打開左下角折疊的“查詢變量”窗格來執行此操作。
最后，通過再次運行查詢并獲得相同的結果來檢查所有內容是否正確設置。
這是查詢文檔：https://shopify.dev/docs/api/usage/search-syntax
除了讀取數據以外，GraphQL 的另一個主要操作是：數據寫入。
下面這個例子將使用?productUpdate?向產品添加一個新?Metafield?帶有元字段的產品。
ProductInput 為 的輸入變量。這個對象需要一種方法來識別您要更新的產品以及您希望更改的特定信息。
通常，將元字段返回是可以驗證是否添加成功這個元字段的最好辦法。
GraphQL 查詢和寫入也可以使用 curl 等工具通過命令行執行。因此，我們需要使用身份驗證令牌來驗證對開發存儲的調用。
在APP插件后臺，單擊“應用程序”菜單，然后單擊“應用程序和銷售渠道設置”來設置一個新的開發APP。
然后創建一個APP用于開發。
創建應用后，轉到“配置”菜單并根據需要添加任意數量的訪問范圍，但請確保至少選中你想要開發的那個項目的?write_products?并?read_products。
然后獲取到所有的API?開發憑據，然后使用??curl、Postman 等工具或用代碼調用時進行身份驗證。
請記住，只能通過 Shopify 后臺查看此令牌一次，因此請務必將其保存在安全的地方。確保永遠不要與任何人共享此 API 訪問令牌，因為它可以用于修改商店的數據。
使用下面的模板，將占位符值（?{your_store_name}?、?{latest_api_version}?和?{access_token}?） 替換為你剛創建的APP的相應的值。
如果你的查詢帶有參數，可以按下面的這個模板：
Postman 是一個第三方工具，允許調用 GraphQL API。它對于查詢和數據寫入非常有用，而不需登錄我們一直在使用的 GraphiQL 應用程序。
打開請求的標頭部分，然后輸入以下鍵/值對，將占位符值替換為您在 Shopify 后臺中顯示的 API 密鑰：
最后，打開請求的“body”部分，然后選擇“GraphQL”單選按鈕。
將我們之前運行的那幾種查詢復制并粘貼到查詢窗口中，可以在 GraphQL Variables 窗口中包含任何變量。然后點擊右上角的發送！
內容比較多，各種截圖。