【注】本文譯自：
https://www.tutorialsPoint.com/graphql/graphql_quick_guide.htm

在本章中，我們將創(chuàng)建一個(gè)簡(jiǎn)單的 API，它返回一條問(wèn)候消息 HelloWorld，并使用 GraphiQL 訪問(wèn)它。

示例

本示例基于 NodeJS、Express 和 Apollo 服務(wù)器。我們將學(xué)習(xí)通過(guò)以下步驟將所有概念結(jié)合起來(lái)：

第 1 步：設(shè)置 Express

ExpressJS 是一個(gè) Web 應(yīng)用框架，可幫助構(gòu)建網(wǎng)站和 Web 應(yīng)用程序。在這個(gè)例子中，我們將在 Express 框架之上構(gòu)建一個(gè) GraphQL API。

下一步是創(chuàng)建文件夾?hello-world-server?并從終端導(dǎo)航到同一文件夾。添加 package.json，并為包命名。由于此包僅在內(nèi)部使用，我們可以將其聲明為私有。

{

????"name":?"hello-world-server",

????"private":?true

}

安裝 Express 服務(wù)器的依賴(lài)項(xiàng)，如下所示：

C:\Users\Admin\hello-world-server>npm install express body-parser cors

body-parser?是一個(gè)中間件包，可以幫助 Express 有效地處理 HTTP Post 請(qǐng)求。cors 是另一個(gè)處理跨源資源共享的中間件包。

在項(xiàng)目文件夾中創(chuàng)建?server.js?文件并在其中鍵入以下內(nèi)容：

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}`))

要驗(yàn)證 Express 服務(wù)器是否已啟動(dòng)并正在運(yùn)行，請(qǐng)?jiān)诮K端窗口中執(zhí)行以下代碼：

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

以下輸出顯示在服務(wù)器控制臺(tái)中。這表明 express 服務(wù)器正在端口 9000 上運(yùn)行。

server is up and running at 9000

如果您打開(kāi)瀏覽器并輸入 http://localhost:9000，您將看到以下屏幕：

要停止服務(wù)器，請(qǐng)按?Ctrl + C。

第 2 步：安裝 GraphQL 和 Apollo Server

現(xiàn)在 Express 已配置，下一步是下載以下 GraphQL 依賴(lài)項(xiàng)：

• graphql

• graphql-tools

• apollo-server-express@1

我們將使用 Apollo 服務(wù)器 v1.0，因?yàn)樗且粋€(gè)穩(wěn)定版本。鍵入以下命令來(lái)安裝這些依賴(lài)項(xiàng)：

C:\Users\Admin\hello-world-server>npm install graphql graphql-tools apollo-server-express@1

我們可以通過(guò)檢查我們之前創(chuàng)建的?package.json?文件來(lái)驗(yàn)證這些依賴(lài)項(xiàng)是否安裝成功。

{

????"name":?"hello-world-server",

????"private":?true

}

第 3 步：定義模式

GraphQL 模式定義了可以從服務(wù)中獲取什么樣的對(duì)象，以及它具有哪些字段?？梢允褂?GraphQL 模式定義語(yǔ)言來(lái)定義模式?，F(xiàn)在，在?server.js?文件中添加以下代碼片段：

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

第 4 步：創(chuàng)建解析器

創(chuàng)建解析器的第一步是添加一些代碼來(lái)處理對(duì)問(wèn)候字段的請(qǐng)求。這是在解析器中指定的。解析器函數(shù)的結(jié)構(gòu)必須與模式匹配。在?server.js?文件中添加以下代碼片段。

//?Adding?resolver

const?resolverObject?=?{

????Query:?{

????????greeting:?()?=>?'Hello?GraphQL??From?TutorialsPoint?!!'

????}

}

第二步是使用?makeExecutableSchema?綁定模式和解析器。這個(gè)函數(shù)是在 graphql-tools 模塊中預(yù)定義的。在?server.js?文件中添加以下代碼片段。

const?{makeExecutableSchema}?=?require('graphql-tools')

const?schema?=?makeExecutableSchema({typeDefs:typeDefinition,?resolvers:resolverObject})

第 5 步：定義從 ReactJS/GraphiQL 應(yīng)用獲取數(shù)據(jù)的路由

在?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?函數(shù)有助于注冊(cè)路由
http://localhost:9000/graphql。ReactJS 應(yīng)用程序可以使用此端點(diǎn)來(lái)查詢數(shù)據(jù)。同樣，graphqliExpress 函數(shù)有助于注冊(cè)路由?http://localhost:9000/graphiql。這將被 GraphiQL 瀏覽器客戶端用于測(cè)試 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 步：?jiǎn)?dòng)應(yīng)用

使用 Node.js 執(zhí)行?server.js，如下所示：

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

第 7 步：測(cè)試 GraphQL API

打開(kāi)瀏覽器并輸入
http://localhost:9000/graphiql。在GraphiQL的查詢選項(xiàng)卡中，輸入以下內(nèi)容：

{

??greeting

}

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

{

????"data":?{

????????"greeting":?"Hello?GraphQL?From?TutorialsPoint?!!"

????}

}

如下圖所示：

注意：請(qǐng)確保使用 Apollo Server 1.0 版。