GraphQL - 環境設定

在本章中，我們將學習 GraphQL 的環境設定。要執行本教程中的示例，您需要以下內容：

執行 Linux、macOS 或 Windows 的計算機。
一個網路瀏覽器，最好是最新版本的 Google Chrome。
已安裝的最新版本的 Node.js。建議使用最新的 LTS 版本。
已安裝 GraphQL for VSCode 擴充套件的 Visual Studio Code 或您選擇的任何程式碼編輯器。

如何使用 Nodejs 構建 GraphQL 伺服器

我們將逐步詳細介紹如何使用 Nodejs 構建 GraphQL 伺服器，如下所示：

步驟 1 - 驗證 Node 和 Npm 版本

安裝 NodeJs 後，使用以下命令在終端上驗證 node 和 npm 的版本：

C:\Users\Admin>node -v
v8.11.3

C:\Users\Admin>npm -v
5.6.0

步驟 2 - 建立專案資料夾並在 VSCode 中開啟

專案的根資料夾可以命名為 test-app。

使用以下說明使用 Visual Studio Code 編輯器開啟資料夾：

C:\Users\Admin>mkdir test-app
C:\Users\Admin>cd test-app
C:\Users\Admin\test-app>code.

步驟 3 - 建立 package.json 並安裝依賴項

建立一個 package.json 檔案，其中將包含 GraphQL 伺服器應用程式的所有依賴項。

{
   "name": "hello-world-server",
   "private": true,
   "scripts": {
      "start": "nodemon --ignore data/ server.js"
   },
   
   "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"
   },
   
   "devDependencies": {
      "nodemon": "1.17.1"
   }
}

使用以下命令安裝依賴項：

C:\Users\Admin\test-app>npm install

步驟 4 - 在 Data 資料夾中建立平面檔案資料庫

在此步驟中，我們使用平面檔案來儲存和檢索資料。建立一個名為 data 的資料夾，並新增兩個檔案 **students.json** 和 **colleges.json**。

以下是 **colleges.json** 檔案：

[
   {
      "id": "col-101",
      "name": "AMU",
      "location": "Uttar Pradesh",
      "rating":5.0
   },
   
   {
      "id": "col-102",
      "name": "CUSAT",
      "location": "Kerala",
      "rating":4.5
   }
]

以下是 **students.json** 檔案：

[
   {
      "id": "S1001",
      "firstName":"Mohtashim",
      "lastName":"Mohammad",
      "email": "mohtashim.mohammad@tutorialpoint.org",
      "password": "pass123",
      "collegeId": "col-102"
   },
   
   {
      "id": "S1002",
      "email": "kannan.sudhakaran@tutorialpoint.org",
      "firstName":"Kannan",
      "lastName":"Sudhakaran",
      "password": "pass123",
      "collegeId": "col-101"
   },
   
   {
      "id": "S1003",
      "email": "kiran.panigrahi@tutorialpoint.org",
      "firstName":"Kiran",
      "lastName":"Panigrahi",
      "password": "pass123",
      "collegeId": "col-101"
   }
]

步驟 5 - 建立資料訪問層

我們需要建立一個數據儲存，用於載入資料資料夾的內容。在這種情況下，我們需要集合變數 students 和 colleges。每當應用程式需要資料時，它都會使用這些集合變數。

在專案資料夾中建立檔案 db.js，如下所示：

const { DataStore } = require('notarealdb');

const store = new DataStore('./data');

module.exports = {
   students:store.collection('students'),
   colleges:store.collection('colleges')
};

步驟 6 - 建立模式檔案 schema.graphql

在當前專案資料夾中建立一個模式檔案，並新增以下內容：

type Query  {
   test: String
}

步驟 7 - 建立解析器檔案 resolvers.js

在當前專案資料夾中建立一個解析器檔案，並新增以下內容：

const Query = {
   test: () => 'Test Success, GraphQL server is up & running !!'
}
module.exports = {Query}

步驟 8 - 建立 Server.js 並配置 GraphQL

建立一個伺服器檔案並配置 GraphQL，如下所示：

const bodyParser = require('body-parser');
const cors = require('cors');
const express = require('express');
const db = require('./db');

const port = process.env.PORT || 9000;
const app = express();

const fs = require('fs')
const typeDefs = fs.readFileSync('./schema.graphql',{encoding:'utf-8'})
const resolvers = require('./resolvers')

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

app.use(cors(), bodyParser.json());

const  {graphiqlExpress,graphqlExpress} = require('apollo-server-express')
app.use('/graphql',graphqlExpress({schema}))
app.use('/graphiql',graphiqlExpress({endpointURL:'/graphql'}))

app.listen(
   port, () => console.info(
      `Server started on port ${port}`
   )
);

步驟 9 - 執行應用程式並使用 GraphiQL 測試

驗證專案 test-app 的資料夾結構，如下所示：

test-app /
   -->package.json
   -->db.js
   -->data
      students.json
      colleges.json
   -->resolvers.js
   -->schema.graphql
   -->server.js

執行命令 npm start，如下所示：

C:\Users\Admin\test-app>npm start

伺服器在 9000 埠執行，因此我們可以使用 GraphiQL 工具測試應用程式。開啟瀏覽器並輸入 URL https://:9000/graphiql。在編輯器中鍵入以下查詢：

{
   Test 
}

伺服器返回的響應如下所示：

{
   "data": {
      "test": "Test Success, GraphQL server is running !!"
   }
}

列印頁面