GraphQLGraphQL 客戶端
由於 GraphQL API 具有比 REST API 更底層的結構，因此有更強大的客戶端，例如 Relay，它可以自動處理批次處理、快取和其他功能。但您不需要複雜的客戶端來呼叫 GraphQL 伺服器。使用 graphql-http，您只需將 HTTP POST 要求傳送至您安裝 GraphQL 伺服器的端點，並將 GraphQL 查詢作為 JSON 酬載中的 query 欄位傳遞即可。
例如，假設我們在 http://localhost:4000/graphql 上安裝了 GraphQL 伺服器，如同 執行 Express GraphQL 伺服器 的範例程式碼，而且我們想要傳送 GraphQL 查詢 { hello }。我們可以使用 curl 從命令列執行此操作。如果您將此貼上到終端機
curl -X POST \-H "Content-Type: application/json" \-d '{"query": "{ hello }"}' \http://localhost:4000/graphql
您應該會看到以 JSON 回傳的輸出
{"data":{"hello":"Hello world!"}}
如果您偏好使用圖形使用者介面來傳送測試查詢，您可以使用 GraphiQL、Insomnia 和 Postman 等客戶端。
從瀏覽器傳送 GraphQL 也相當簡單。開啟 http://localhost:4000/graphql，開啟開發人員主控台，並貼上
fetch("/graphql", { method: "POST", headers: { "Content-Type": "application/json", Accept: "application/json", }, body: JSON.stringify({ query: "{ hello }" }),}) .then(r => r.json()) .then(data => console.log("data returned:", data))
您應該會看到傳回的資料，記錄在主控台中
data returned: Object { hello: "Hello world!" }
在此範例中，查詢只是一個硬編碼字串。隨著您的應用程式變得更複雜，而且您新增了 GraphQL 端點，這些端點會採用 傳遞引數中所述的引數，您會想要使用 client 端程式碼中的變數來建構 GraphQL 查詢。您可以透過在查詢中包含一個以美元符號為字首的關鍵字，並在有效負載上傳遞一個額外的 variables 欄位來執行此操作。
例如，假設您正在執行 傳遞引數 中的範例伺服器，其架構為
type Query { rollDice(numDice: Int!, numSides: Int): [Int]}
您可以使用程式碼從 JavaScript 存取此架構
var dice = 3var sides = 6var query = `query RollDice($dice: Int!, $sides: Int) { rollDice(numDice: $dice, numSides: $sides)}`
fetch("/graphql", { method: "POST", headers: { "Content-Type": "application/json", Accept: "application/json", }, body: JSON.stringify({ query, variables: { dice, sides }, }),}) .then(r => r.json()) .then(data => console.log("data returned:", data))
使用此語法來處理變數是個好主意，因為它會自動防止因跳脫字元而產生的錯誤，而且它讓您更容易監控您的伺服器。
一般而言，設定 Relay 等 GraphQL client 會花費較長的時間，但隨著您的應用程式成長，這將是值得的，因為您可以取得更多功能。您可能想要從僅使用 HTTP 要求作為底層傳輸層開始，然後隨著應用程式變得更複雜而切換到更複雜的 client。
在這個階段，您可以為接收單一字串的 API 在 GraphQL 中撰寫 client 和伺服器。若要執行更多操作，您會想要 學習如何使用其他基本資料類型。