【注】本文節(jié)譯自：
https://www.tutorialspoint.com/graphql/graphql_quick_guide.htm

在本章中，我們將學(xué)習(xí) GraphQL 的環(huán)境設(shè)置。 要執(zhí)行本教程中的示例，您將需要以下內(nèi)容：

• 運(yùn)行 Linux、macOS 或 Windows 的計(jì)算機(jī)。

• 網(wǎng)絡(luò)瀏覽器，最好是最新版本的 Google Chrome。

• 安裝了最新版本的 Node.js。建議使用最新的 LTS 版本。

• 已安裝適用于 VSCode 的擴(kuò)展 GraphQL 的 Visual Studio Code 或您選擇的任何代碼編輯器。

如何使用 Nodejs 構(gòu)建 GraphQL 服務(wù)器

我們將詳細(xì)介紹使用 Nodejs 構(gòu)建 GraphQL 服務(wù)器的步驟，如下所示：

第 1 步 - 驗(yàn)證節(jié)點(diǎn)和 Npm 版本

安裝 NodeJs 后，在終端上使用以下命令驗(yàn)證 node 和 npm 的版本：

第 2 步 - 創(chuàng)建項(xiàng)目文件夾并在 VSCode 中打開(kāi)

項(xiàng)目的根文件夾可以命名為 test-app。

按照以下說(shuō)明使用 Visual Studio 代碼編輯器打開(kāi)文件夾：

第 3 步 - 創(chuàng)建 package.json 并安裝依賴(lài)項(xiàng)

創(chuàng)建 package.json 文件，該文件將包含 GraphQL 服務(wù)器應(yīng)用程序的所有依賴(lài)項(xiàng)。

{

???"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"

???}

}

使用下面給出的命令安裝依賴(lài)項(xiàng)：

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

步驟 4 - 在數(shù)據(jù)文件夾中創(chuàng)建平面文件數(shù)據(jù)庫(kù)

在這一步中，我們使用平面文件來(lái)存儲(chǔ)和檢索數(shù)據(jù)。創(chuàng)建文件夾 data 并添加兩個(gè)文件?student.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

????}

?]

以下是?student.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 步 - 創(chuàng)建數(shù)據(jù)訪問(wèn)層

我們需要?jiǎng)?chuàng)建加載數(shù)據(jù)文件夾內(nèi)容的數(shù)據(jù)存儲(chǔ)。在這種情況下，我們需要集合變量、學(xué)生和大學(xué)。每當(dāng)應(yīng)用程序需要數(shù)據(jù)時(shí)，它就會(huì)使用這些集合變量。

在項(xiàng)目文件夾中創(chuàng)建文件 db.js，如下所示：

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

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

module.exports?=?{

???students:store.collection('students'),

???colleges:store.collection('colleges')

};

第 6 步 - 創(chuàng)建模式文件，schema.graphql

在當(dāng)前項(xiàng)目文件夾中創(chuàng)建模式文件并添加以下內(nèi)容：

type?Query??{

???test:?String

}

第 7 步 - 創(chuàng)建解析器文件，resolvers.js

在當(dāng)前項(xiàng)目文件夾中創(chuàng)建解析器文件并添加以下內(nèi)容：

const?Query?=?{

????test:?()?=>?'Test?Success,?GraphQL?server?is?up?&?running?!!'

?}

?module.exports?=?{Query}

第 8 步 - 創(chuàng)建 Server.js 并配置 GraphQL

創(chuàng)建服務(wù)器文件并按如下方式配置 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 步 - 運(yùn)行應(yīng)用程序并使用 GraphiQL 進(jìn)行測(cè)試

驗(yàn)證項(xiàng)目 test-app 的文件夾結(jié)構(gòu)如下：

test-app /

???-->package.json

???-->db.js

???-->data

??????students.json

??????colleges.json

???-->resolvers.js

???-->schema.graphql

???-->server.js

運(yùn)行命令 npm start，如下所示 -

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

服務(wù)器運(yùn)行在 9000 端口，因此我們可以使用 GraphiQL 工具測(cè)試應(yīng)用程序。打開(kāi)瀏覽器并輸入 URL
http://localhost:9000/graphiql。在編輯器中輸入以下查詢(xún)：

{

??test

}

來(lái)自服務(wù)器的響應(yīng)如下：

{

????"data":?{

????????"test":?"Test?Success,?GraphQL?server?is?running?!!"

????}

}