使用 Fetch API 發送包含 GraphQL 查詢的 POST 請求
GraphQL 是一種查詢語言規範，用於 Web API 以允許使用 API 客戶端來創建數據查詢。查詢可以特定於客戶端，並將它們發送到能夠準確返回所請求數據的 GraphQL 服務器。單個 GraphQL POST 請求可用於獲取當前上下文所需的所有數據。這與 RESTful API 不同，後者可能會導致請求鍊或瀑布流，每個請求都需要前一個請求的數據，以便從 API 服務器檢索所有數據。
通常，GraphQL 客戶端用於促進客戶端查詢的構建，並將包含 GraphQL 查詢的 HTTP POST 請求發送到負責返回數據的 GraphQL 服務器。不需要使用專用的 GraphQL 客戶端，因為可以使用 Fetch API 將 GraphQL 查詢作為 POST 請求發送，這類似於使用 Fetch API 提交 FormData 的過程。為了展示如何使用 Fetch API 發送包含 GraphQL 查詢的 POST 請求，可以使用來自 GraphQL API 的數據：https://content.wpgraphql.com/graphql 由 WPGraphQL 提供。從 GraphQL API 獲取最新帖子後，通過發送包含 GraphQL 查詢的 POST 請求，我們可以將數據顯示為列表，每個項目標題為鏈接。
創建 HTML 文件
首先，創建一個 HTML 文件，該文件將鏈接到包含代碼的 JavaScript 文件，該代碼將使用 Fetch API 作為 POST 請求發送 GraphQL 查詢。發送包含 GraphQL 查詢的 POST 請求後，查詢結果將顯示為 HTML，並且在收到任何數據之前顯示無數據消息。在項目文件夾中添加一個名為“index.html”的新文件，其內容如下：
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Post a GraphQL Query with the Fetch API</title>
</head>
<body>
<div id="data-container">
<p>no data yet!</p>
<button id="data-button">Get Data</button>
</div>
<script src="/script.js"></script>
</body>
</html>
添加 JavaScript 文件
在“index.html”文件中，引用了一個名為“script.js”的 JavaScript 文件。我們可以在與 index html 文件相同的文件夾中創建該文件。在項目文件夾中創建“script.js”後，添加以下代碼：
const dataFetchDisplay = function ({
eventListenerSelector,
eventType,
dataFetcher,
displayUpdater,
dataTargetSelector,
}) {
document
.querySelector(eventListenerSelector)
.addEventListener(eventType, async () => {
displayUpdater(dataTargetSelector, await dataFetcher());
});
};
“dataFetchDisplay”函數有一個選項對像作為參數，其中包含發送包含 GraphQL 查詢的 Fetch API POST 請求所需的信息，儘管我們尚未調用此函數或定義函數“displayUpdater”和“dataFetcher”包含在 options 參數中，並在調用“dataFetchDisplay”函數時在實例化的事件偵聽器的異步回調中使用。以下是“dataFetchDisplay”函數的使用方式：
dataFetchDisplay({
eventListenerSelector: "#data-button",
eventType: "click",
dataFetcher: getData,
displayUpdater: updateDisplay,
dataTargetSelector: "#data-container",
});
請注意，“eventListenerSelector”和“dataTargetSelector”參數對應於第一步創建的 index.html 文件中的 ID 屬性。這些值可以更改，但這些值必須與 HTML 文檔 ID 屬性相匹配。繼續在之前添加到script.js中的函數定義的正下方添加“dataFetchDisplay”函數的調用。
使用 GraphQL 查詢獲取 API POST 請求
現在我們已經定義並調用了“dataFetchDisplay”函數，如果我們嘗試運行此代碼，它將導致錯誤，因為尚未定義用於獲取數據並顯示它的輔助函數。在“dataFetchDisplay”函數正上方添加以下代碼來定義“dataFetcher”選項對象參數鍵值中引用的“getData”函數。
const getData = async function () {
return (
await (
await fetch("https://content.wpgraphql.com/graphql", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
query: "{ posts { nodes { title, link } } }",
}),
})
).json()
).data.posts.nodes;
};
上面顯示的 getData 函數是定義 Fetch API 發送的 POST 請求的地方，其中包含 GraphQL 查詢。對於此示例，GraphQL API 由 WPGraphQL 提供，查詢將檢索最近十篇博文的鏈接和標題信息。由於我們知道使用 Fetch API 發送的 GraphQL 查詢 POST 請求返回的數據格式，因此我們只能返回“getData”函數中的“節點”。這樣，當使用“getData”函數時，數據已經被格式化為一個帖子對象的數組。
顯示 GraphQL 查詢數據
現在我們已經定義了“getData”函數，並且在使用 Fetch API 發送 POST 請求後返回了 GraphQL 查詢數據，我們需要在從 GraphQL API 服務器返回數據後顯示數據。為此，將使用作為選項對像中的“displayUpdater”參數傳入的函數。在“script.js”文件中的“dataFetchDisplay”函數上方添加此代碼：
const updateDisplay = function (selector, data) {
const list = document.createElement("ul");
data.forEach(function (item) {
const listItemLink = document.createElement("a");
listItemLink.textContent = item.title;
listItemLink.setAttribute("href", item.link);
const listItem = document.createElement("li");
listItem.appendChild(listItemLink);
list.appendChild(listItem);
});
document.querySelector(selector).replaceChildren(list);
};
"updateDisplay" 接受兩個參數：一個表示要插入生成的 HTML 的目標元素，第二個是數據數組。在此示例中，使用標題為每個數據對象創建一個鏈接項。然後使用鏈接元素列表替換目標元素的html。
通過將“getData”和“displayUpdater”函數作為參數傳遞給“dataFetchDisplay”函數，可以更改查詢及其顯示方式以適應使用上下文。 “dataFetchDisplay”函數在這個意義上是通用的，因為參數根據函數的具體用法確定要顯示什麼數據以及如何顯示。
將所有代碼部分放在一起應該會生成一個如下所示的 script.js 文件：
//script.js
const getData = async function () {
return (
await (
await fetch("https://content.wpgraphql.com/graphql", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
query: "{ posts { nodes { title, link } } }",
}),
})
).json()
).data.posts.nodes;
};
const updateDisplay = function (selector, data) {
const list = document.createElement("ul");
data.forEach(function (item) {
const listItemLink = document.createElement("a");
listItemLink.textContent = item.title;
listItemLink.setAttribute("href", item.link);
const listItem = document.createElement("li");
listItem.appendChild(listItemLink);
list.appendChild(listItem);
});
document.querySelector(selector).replaceChildren(list);
};
const dataFetchDisplay = function ({
eventListenerSelector,
eventType,
dataFetcher,
displayUpdater,
dataTargetSelector,
}) {
document
.querySelector(eventListenerSelector)
.addEventListener(eventType, async () => {
displayUpdater(dataTargetSelector, await dataFetcher());
});
};
dataFetchDisplay({
eventListenerSelector: "#data-button",
eventType: "click",
dataFetcher: getData,
displayUpdater: updateDisplay,
dataTargetSelector: "#data-container",
});
在本地測試 GraphQL 發布請求
此時我們已經設置了“index.html”和“script.js”文件，因此我們可以通過在本地測試它來確保它正常工作。為此，我們需要安裝 http-server npm 包。在繼續之前，請確保根據需要安裝了 Node.js 和 npm。
npm init package.json
安裝後，您可以在終端窗口中打開項目文件夾並運行 npm init 命令，然後按照顯示的提示進行操作。這將在項目文件夾中設置 package.json。
npm install http-server
配置 package.json 文件後，運行命令 npm install http-server --save-dev . http-server npm 包現在作為開發依賴安裝。
添加 npm 腳本
在 package.json 文件配置的“scripts”對像中添加以下腳本：
{
"scripts": {
"dev": "http-server"
}
}
現在可以運行開發腳本，這將使用 http-server npm 包啟動本地開發環境。您現在應該有一個添加到項目文件夾中的“node_modules”文件夾，並且 package.json 文件應該如下所示：
{
"name": "post-graphql-query-fetch-api",
"version": "1.0.0",
"description": "",
"main": "script.js",
"scripts": {
"dev": "http-server",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"http-server": "^0.12.3"
}
}
要使用 http-server 啟動本地開發環境，請運行命令 npm run dev 並導航到控制台輸出中顯示的 url。開發 url 很可能是“http://localhost:8080”，因為這是本地服務器配置的默認設置。
運行 npm run dev 後 命令並導航“http://localhost:8080”，您應該會在瀏覽器中看到“還沒有數據”消息和我們之前創建的“獲取數據”按鈕。要使用 Fetch API 發送 GraphQL 查詢 POST 請求，請單擊“獲取數據”按鈕，頁面上應該會顯示最新的十個帖子。
在某些情況下，在您的項目中包含一個專用的 GraphQL 客戶端可能會有所幫助，但在其他情況下，使用 Fetch API 發送包含 GraphQL 查詢的 POST 請求而無需 GraphQL 客戶端就足夠了。如果不需要 GraphQL 客戶端附帶的其他更高級的功能，這可以節省時間，尤其是在對 GraphQL 服務器的請求不頻繁的情況下。
