安裝 GraphiQL

GraphiQL 是 GraphQL 基金會(huì)下的一個(gè)開源項(xiàng)目。它是一個(gè)基于 Web 的工具，允許您編寫具有自動(dòng)完成的 GraphQL 查詢，然后針對(duì)生產(chǎn) API 執(zhí)行這些查詢。

Shopify 提供了一個(gè)打包為應(yīng)用程序的 GraphiQL 版本，可以安裝到 Shopify 商店。此版本具有內(nèi)置的幫助程序，用于向 Shopify 管理員 API 進(jìn)行身份驗(yàn)證，因此無需任何復(fù)雜的設(shè)置即可輕松測(cè)試對(duì)實(shí)時(shí)數(shù)據(jù)的查詢。

通過輸入測(cè)試商店的名稱來選擇應(yīng)用的安裝位置。

如果你按照我們的建議使用開發(fā)人員商店，請(qǐng)隨意選擇任意數(shù)量的范圍，以便你可以嘗試本研討會(huì)中未涵蓋的其他查詢和變更。至少，請(qǐng)確保選擇要讀取和寫入產(chǎn)品的范圍。

安裝該應(yīng)用程序后，您會(huì)看到它嵌入在你的商店管理儀表板中。

請(qǐng)考慮將應(yīng)用固定到導(dǎo)航菜單，以便以后輕松訪問。

生成第一個(gè)查詢

這里對(duì) Shopify 管理員 API 運(yùn)行查詢作為例子。

需要對(duì)確保在 GraphiQL 頂部選擇了 API 架構(gòu)以及 Admin (Latest) API 版本。

選擇架構(gòu)后，我們可以查詢商店的名稱。在 GraphiQL 的左側(cè)輸入以下查詢，確保覆蓋可能已經(jīng)存在的任何內(nèi)容。

示例中，第一個(gè)術(shù)語定義了我們要調(diào)用的特定查詢 –?shop?。GraphQL 和 REST 之間的主要區(qū)別之一是 GraphQL 要求您指定要檢索的確切字段。在本例中，Shop 對(duì)象包含許多字段，我們只指定了要返回的?name?字段。

要運(yùn)行查詢，請(qǐng)按 GraphiQL 左上角的大三角形“播放”按鈕。

在右側(cè)看到一個(gè)帶有您商店名稱的JSON對(duì)象。響應(yīng)將始終是一個(gè) JSON 對(duì)象，可以在屬性中找到特定于響應(yīng)的數(shù)據(jù)。

可以通過在同一查詢中的新行上指定所需的字段來返回更多數(shù)據(jù)。例如，我們還可以查詢?contactEmail?and?url?我們的商店。你會(huì)發(fā)現(xiàn)，邊輸入查詢字段時(shí)，右側(cè)會(huì)自動(dòng)返回查詢的數(shù)據(jù)。

使用 GraphiQL 時(shí)，您可以使用?CTRL+Space?查看所有可用字段。除了有關(guān) Shopify.dev 的文檔外，您還可以使用屏幕右側(cè)的文檔資源管理器查看更多信息。

擴(kuò)展查詢

目前，我們的查詢僅返回我們查詢的基?Shop?對(duì)象上的字段，這類似于與數(shù)據(jù)庫(kù)中的特定對(duì)象或者叫相關(guān)的 REST?表。但是，在 GraphQL API 中，我們通常有許多對(duì)象是鏈接的，可以一起查詢。

查詢通常與從各種連接的對(duì)象類型中讀取的字段深度嵌套在一起。構(gòu)建檢索復(fù)雜數(shù)據(jù)結(jié)構(gòu)的查詢的能力是 GraphQL 的強(qiáng)大功能。

如果我們使用 REST API，我們將需要執(zhí)行許多 API 調(diào)用來檢索所有連接的數(shù)據(jù)，但是在 GraphQL 中，我們只需一次即可完成。

查詢列表產(chǎn)品

現(xiàn)在我們已經(jīng)介紹了如何查詢嵌套對(duì)象，然后嘗試查詢對(duì)象列表。以使用?products?查詢?yōu)槔?，但如果以?shop?的寫法去寫 product?，會(huì)報(bào)錯(cuò)，是因?yàn)?products?查詢返回結(jié)果?ProductConnection?，而不僅僅是我們預(yù)期的?Product?對(duì)象列表。

必須要更正為這樣的寫法才會(huì)返回正確的數(shù)據(jù)：

在 GraphQL 中，一個(gè)?Connection?（就像從查詢中返回的?products?那個(gè)一樣）是一個(gè)特殊的包裝器，它允許我們以安全的方式查詢對(duì)象列表。

它 Connection 提供了額外的邏輯，允許在限制范圍內(nèi)的查詢數(shù)量，之后才會(huì)返回?cái)?shù)據(jù)。例如，我們可以將查詢限制為前五個(gè)結(jié)果，然后我們可以對(duì)接下來的五個(gè)結(jié)果執(zhí)行另一個(gè)查詢，依此類推。這是一種基于“分頁”的查詢。

你需要知道，在 GraphQL 查詢中使用 時(shí)?Connection?，是不會(huì)返回對(duì)象列表的，而是會(huì)返回一個(gè)“多個(gè)對(duì)象或多個(gè)表共同的”查詢列表。用過?node.js?的對(duì)這種查詢應(yīng)該不會(huì)陌生。

查詢參數(shù)

在查詢時(shí)，我們可以在調(diào)用中包含一個(gè)?query?參數(shù)?products.

這樣的查詢將會(huì)返回?product_type?為 top 的數(shù)據(jù)。

上面的例子中同時(shí)包含了limit 和 query 參數(shù)，因此它最多會(huì)返回 5 個(gè)項(xiàng)目.

命名查詢是使用比較多的查詢方式，因?yàn)檫@種查詢?cè)试S我們創(chuàng)建查詢變量，并且還可以更輕松地調(diào)試。

將上面的例子，重寫為一個(gè)命名查詢。使其具有一個(gè)名稱，并接受兩個(gè)查詢變量。

首先將查詢的名稱命名為?topProducts?，并引入兩個(gè)變量：?numberOfProducts?和?queryParams

你會(huì)發(fā)現(xiàn)這很像是一個(gè)函數(shù)，可以傳遞變量。

當(dāng)指定參數(shù)時(shí)，我們需要包含數(shù)據(jù)類型。

在這個(gè)例子中， 參數(shù)數(shù)據(jù)有兩個(gè)類型String 和Int! numberOfProducts 的參數(shù)是必需的，而 queryParams 缺少是可選的。

我們需要做的最后一件事就是給我們的變量賦值。

在 GraphiQL 中，我們通過打開左下角折疊的“查詢變量”窗格來執(zhí)行此操作。

最后，通過再次運(yùn)行查詢并獲得相同的結(jié)果來檢查所有內(nèi)容是否正確設(shè)置。

這是查詢文檔：https://shopify.dev/docs/api/usage/search-syntax

為產(chǎn)品創(chuàng)建元字段

除了讀取數(shù)據(jù)以外，GraphQL 的另一個(gè)主要操作是：數(shù)據(jù)寫入。

下面這個(gè)例子將使用?productUpdate?向產(chǎn)品添加一個(gè)新?Metafield?帶有元字段的產(chǎn)品。

ProductInput 為 的輸入變量。這個(gè)對(duì)象需要一種方法來識(shí)別您要更新的產(chǎn)品以及您希望更改的特定信息。

通常，將元字段返回是可以驗(yàn)證是否添加成功這個(gè)元字段的最好辦法。

使用 curl

GraphQL 查詢和寫入也可以使用 curl 等工具通過命令行執(zhí)行。因此，我們需要使用身份驗(yàn)證令牌來驗(yàn)證對(duì)開發(fā)存儲(chǔ)的調(diào)用。

在APP插件后臺(tái)，單擊“應(yīng)用程序”菜單，然后單擊“應(yīng)用程序和銷售渠道設(shè)置”來設(shè)置一個(gè)新的開發(fā)APP。

然后創(chuàng)建一個(gè)APP用于開發(fā)。

創(chuàng)建應(yīng)用后，轉(zhuǎn)到“配置”菜單并根據(jù)需要添加任意數(shù)量的訪問范圍，但請(qǐng)確保至少選中你想要開發(fā)的那個(gè)項(xiàng)目的?write_products?并?read_products。

然后獲取到所有的API?開發(fā)憑據(jù)，然后使用??curl、Postman 等工具或用代碼調(diào)用時(shí)進(jìn)行身份驗(yàn)證。

請(qǐng)記住，只能通過 Shopify 后臺(tái)查看此令牌一次，因此請(qǐng)務(wù)必將其保存在安全的地方。確保永遠(yuǎn)不要與任何人共享此 API 訪問令牌，因?yàn)樗梢杂糜谛薷纳痰甑臄?shù)據(jù)。

使用下面的模板，將占位符值（?{your_store_name}?、?{latest_api_version}?和?{access_token}?） 替換為你剛創(chuàng)建的APP的相應(yīng)的值。

如果你的查詢帶有參數(shù)，可以按下面的這個(gè)模板：

使用 Postman

Postman 是一個(gè)第三方工具，允許調(diào)用 GraphQL API。它對(duì)于查詢和數(shù)據(jù)寫入非常有用，而不需登錄我們一直在使用的 GraphiQL 應(yīng)用程序。

打開請(qǐng)求的標(biāo)頭部分，然后輸入以下鍵/值對(duì)，將占位符值替換為您在 Shopify 后臺(tái)中顯示的 API 密鑰：

最后，打開請(qǐng)求的“body”部分，然后選擇“GraphQL”單選按鈕。

將我們之前運(yùn)行的那幾種查詢復(fù)制并粘貼到查詢窗口中，可以在 GraphQL Variables 窗口中包含任何變量。然后點(diǎn)擊右上角的發(fā)送！

內(nèi)容比較多，各種截圖。

文章轉(zhuǎn)自微信公眾號(hào)@Shopify 主題開發(fā)

#你可能也喜歡這些API文章!

GraphQL API滲透測(cè)試指南

Python + BaiduTransAPI ：快速檢索千篇英文文獻(xiàn)（附源碼）

掌握ChatGPT API集成的方便指南

node.js + express + docker + mysql + jwt 實(shí)現(xiàn)用戶管理restful api

nodejs + mongodb 編寫 restful 風(fēng)格博客 api

表格插件wpDataTables-將 WordPress 表與 Google Sheets API 連接

手把手教你用Python和Flask創(chuàng)建REST API

使用 Django 和 Django REST 框架構(gòu)建 RESTful API：實(shí)現(xiàn) CRUD 操作

ASP.NET Web API快速入門介紹