【注】本文譯自：
GraphQL - Quick Guide (tutorialspoint.com)

在本章中，我們將建立一個簡單的 API，它返回一條問候訊息 HelloWorld，並使用 GraphiQL 訪問它。

示例

本示例基於 NodeJS、Express 和 Apollo 伺服器。我們將學習通過以下步驟將所有概念結合起來：

第 1 步：設定 Express

ExpressJS 是一個 Web 應用框架，可幫助構建網站和 Web 應用程式。在這個例子中，我們將在 Express 框架之上構建一個 GraphQL API。下一步是建立資料夾 hello-world-server 並從終端導航到同一資料夾。新增 package.json，併為包命名。由於此包僅在內部使用，我們可以將其宣告為私有。

{
    "name": "hello-world-server",
    "private": true
}

安裝 Express 伺服器的依賴項，如下所示：
C:\Users\Admin\hello-world-server>npm install express body-parser cors
body-parser 是一箇中間件包，可以幫助 Express 有效地處理 HTTP Post 請求。cors 是另一個處理跨源資源共享的中介軟體包。
在專案資料夾中建立 server.js 檔案並在其中鍵入以下內容：

const bodyParser = require('body-parser')
const cors = require('cors')
const express = require('express')
const port = process.env.PORT|| 9000
const app = express()
//register middleware
app.use(bodyParser.json() , cors())
app.listen(port, () => console.log(`server is up and running at ${port}`))
 

要驗證 Express 伺服器是否已啟動並正在執行，請在終端視窗中執行以下程式碼：
C:\Users\Admin\hello-world-server>node server.js
以下輸出顯示在伺服器控制檯中。這表明 express 伺服器正在埠 9000 上執行。
server is up and running at 9000
如果您開啟瀏覽器並輸入 http://localhost:9000 ，您將看到以下螢幕：

要停止伺服器，請按 Ctrl + C。

第 2 步：安裝 GraphQL 和 Apollo Server

現在 Express 已配置，下一步是下載以下 GraphQL 依賴項：

• graphql
• graphql-tools
• apollo-server-express@1
  我們將使用 Apollo 伺服器 v1.0，因為它是一個穩定版本。鍵入以下命令來安裝這些依賴項：
  C:\Users\Admin\hello-world-server>npm install graphql graphql-tools apollo-server-express@1
  我們可以通過檢查我們之前建立的 package.json 檔案來驗證這些依賴項是否安裝成功。

{
    "name": "hello-world-server",
    "private": true,
    "dependencies": {
        "apollo-server-express": "^1.4.0",
        "body-parser": "^1.18.3",
        "cors": "^2.8.4",
        "express": "^4.16.3",
        "graphql": "^0.13.2",
        "graphql-tools": "^3.1.1"
    }
}

第 3 步：定義模式

GraphQL 模式定義了可以從服務中獲取什麼樣的物件，以及它具有哪些欄位。可以使用 GraphQL 模式定義語言來定義模式。現在，在 server.js 檔案中新增以下程式碼片段：

// Adding Type Definitions
const typeDefinition = `
   type Query  {
      greeting: String
   }`

此處，查詢包含返回字串值 的 greeting 屬性。

第 4 步：建立解析器

建立解析器的第一步是新增一些程式碼來處理對問候欄位的請求。這是在解析器中指定的。解析器函式的結構必須與模式匹配。在 server.js 檔案中新增以下程式碼片段。

// Adding resolver
const resolverObject = {
    Query: {
        greeting: () => 'Hello GraphQL  From TutorialsPoint !!'
    }
}

第二步是使用 makeExecutableSchema 繫結模式和解析器。這個函式是在 graphql-tools 模組中預定義的。在 server.js 檔案中新增以下程式碼片段。

const {makeExecutableSchema} = require('graphql-tools')
const schema = makeExecutableSchema({typeDefs:typeDefinition, resolvers:resolverObject})

第 5 步：定義從 ReactJS/GraphiQL 應用獲取資料的路由

在 server.js 檔案中新增以下程式碼片段：

const {graphqlExpress, graphiqlExpress} = require('apollo-server-express')

//create routes for graphql and graphiql
app.use('/graphql',graphqlExpress({schema}))
app.use('/graphiql',graphiqlExpress({endpointURL:'/graphql'}))

graphqlExpress 函式有助於註冊路由
http://localhost:9000/graphql。 ReactJS 應用程式可以使用此端點來查詢資料。同樣，graphqliExpress 函式有助於註冊路由 http://localhost:9000/graphiql。這將被 GraphiQL 瀏覽器客戶端用於測試 API。
完整的 server.js 程式碼如下：

Const bodyParser = require('body-parser')
const cors = require('cors')
const express = require('express')
const port = process.env.PORT || 9000
const app = express()

//register middleware
app.use(bodyParser.json(), cors())
app.listen(port, () => console.log(`server is up and running at ${port}`))

// Adding Type Definitions
const typeDefinition = `
   type Query  {
      greeting: String
   }`

// Adding resolver
const resolverObject = {
    Query: {
        greeting: () => 'Hello GraphQL From TutorialsPoint !!'
    }
}

const {makeExecutableSchema} = require('graphql-tools')
const schema = makeExecutableSchema({typeDefs:typeDefinition, resolvers:resolverObject})

const {graphqlExpress, graphiqlExpress} = require('apollo-server-express')

//create routes for graphql and graphiql
app.use('/graphql',graphqlExpress({schema}))
app.use('/graphiql',graphiqlExpress({endpointURL:'/graphql'}))

第 6 步：啟動應用

使用 Node.js 執行 server.js，如下所示：
C:\Users\Admin\hello-world-server>node server.js

第 7 步：測試 GraphQL API

開啟瀏覽器並輸入
http://localhost:9000/graphiql。 在GraphiQL的查詢選項卡中，輸入以下內容：

{
  greeting
}

來自伺服器的響應如下：

{
    "data": {
        "greeting": "Hello GraphQL From TutorialsPoint !!"
    }
}

如下圖所示：

注意：請確保使用 Apollo Server 1.0 版。