GraphQL - 示例

本章將建立一個簡單的 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

如果開啟瀏覽器並輸入 https://: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 - 定義模式 (Schema)

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

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

這裡，查詢包含一個 greeting 屬性，它返回一個 string 值。

步驟 4 - 建立解析器 (Resolver)

建立解析器的第一步是新增一些程式碼來處理對 greeting 欄位的請求。這在 resolver 中指定。解析器函式的結構必須與模式匹配。在 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 函式有助於註冊路由 https://:9000/graphql。ReactJS 應用可以使用此端點來查詢資料。同樣，graphqliExpress 函式有助於註冊路由 https://: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()

app.use(bodyParser.json() , cors())
const typeDefinition = `
type Query  {
   greeting: String
}`
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')

app.use('/graphql',graphqlExpress({schema}))
app.use('/graphiql',graphiqlExpress({endpointURL:'/graphql'}))
app.listen(port, () =>  console.log(`server is up and running ${port}`))

步驟 6 - 啟動應用

使用 Node.js 執行 server.js，如下所示：

C:\Users\Admin\hello-world-server>node server.js

步驟 7 - 測試 GraphQL API

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

{
   greeting
}

伺服器的響應如下所示：

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

下圖顯示了響應：

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

列印頁面