GraphQL 快速入門【5】GraphQL 示例

信碼由韁發表於2021-09-29

【注】本文譯自：
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 版。

相關文章