來源：https://medium.com/wesionary-team/create-graphql-server-with-node-js-express-apollo-server-cfe1dab9571a
https://github.com/UjjwolKayastha/graphQL-express-api
本教程將指導(dǎo)您創(chuàng)建一個(gè)可以同時(shí)為graphQL和rest服務(wù)器服務(wù)的簡單服務(wù)器策泣。首先衙傀，讓我們來了解一下這些術(shù)語的官方定義。
GraphQL
GraphQL是一種api的查詢語言萨咕，也是一種使用現(xiàn)有數(shù)據(jù)實(shí)現(xiàn)這些查詢的運(yùn)行時(shí)统抬。GraphQL為API中的數(shù)據(jù)提供了一個(gè)完整的、可理解的描述危队，為客戶端提供了精確地要求他們所需要的東西的能力聪建，使API隨著時(shí)間的推移更容易發(fā)展，并支持強(qiáng)大的開發(fā)人員工具茫陆。
Apollo GraphQL
通過將api金麸、數(shù)據(jù)庫和微服務(wù)組合成可以用GraphQL查詢的單個(gè)數(shù)據(jù)圖，簡化了應(yīng)用程序開發(fā)簿盅。
為此挥下，我們使用“apollo-server-express”揍魂，這樣我們就可以同時(shí)托管express和graphQL服務(wù)器。然而棚瘟，為了創(chuàng)建單獨(dú)的GraphQL服務(wù)器现斋，我們將使用“apollo-server”。
Express
快速偎蘸、無約束庄蹋、極簡的Node.js web框架。
讓我們開始構(gòu)建服務(wù)器迷雪。
選擇您選擇的目錄來創(chuàng)建項(xiàng)目目錄蔓肯。
mkdir GraphQL-Express
使用terminal打開文件夾目錄。輸入“npm init -y”命令初始化nodejs項(xiàng)目振乏。這將在當(dāng)前目錄中生成package.json文件蔗包。
讓我們安裝所需的依賴項(xiàng):
你可以使用yarn或npm來安裝依賴項(xiàng)。在本教程中慧邮，我將使用yarn调限。
yarn add nodemon graphql express apollo-server dotenv apollo-server-express
包裝說明:
nodemon:幫助開發(fā)基于node.js的應(yīng)用程序的工具，當(dāng)檢測到目錄中的文件發(fā)生變化時(shí)误澳，它會(huì)自動(dòng)重啟節(jié)點(diǎn)應(yīng)用程序耻矮。
graphql: graphql模塊導(dǎo)出graphql功能的核心子集，用于創(chuàng)建graphql類型的系統(tǒng)和服務(wù)器忆谓。
express:最小且靈活的Node.js web應(yīng)用框架裆装，為web和移動(dòng)應(yīng)用程序提供了一組健壯的特性。
apollo-server:創(chuàng)建簡單的GraphQL服務(wù)器
apollo-server-express: community-maintained開源GraphQL服務(wù)器使用許多Node.js HTTP服務(wù)器框架倡缠。
dotenv: zero-dependency模塊將環(huán)境變量從.env文件加載到process.env哨免。
在本教程中，我將創(chuàng)建一個(gè)單獨(dú)的express服務(wù)器和GraphQL服務(wù)器昙沦，然后將它們集成到一個(gè)服務(wù)于rest端點(diǎn)和GraphQL的服務(wù)器中琢唾。
讓我們創(chuàng)建express服務(wù)器:
在那之前，讓我們用“start”腳本更新我們的package.json:
package.json文件應(yīng)該是這樣的:
{
"name":"graphQL",
"version":"1.0.0",
"description":"",
"main":"index.js",
"scripts": {
"start":"nodemon server.js",
"test":"echo\"Error: no test specified\"&& exit 1"
? },
"keywords": [],
"author":"",
"license":"ISC",
"dependencies": {
"apollo-server-express":"^2.19.1",
"dotenv":"^8.2.0",
"express":"^4.17.1",
"graphql":"^15.4.0",
"nodemon":"^2.0.6"
? }
}
1盾饮、在根目錄下創(chuàng)建server.js和.env文件采桃，并輸入以下代碼。
touch server.js .env
在.env文件中添加以下代碼:PORT=8000并保存文件丘损。
const express = require("express");
require("dotenv").config();
//express server
const app = express();
app.get("/rest", (req, res) => {
? res.json({
? ? data: "API is working...",
? });
});
app.listen(process.env.PORT, () => {
? console.log(`?? Server is running at http://localhost:${process.env.PORT}`);
});
現(xiàn)在我們的服務(wù)器準(zhǔn)備好了普办。
輸入yarn start啟動(dòng)我們的express服務(wù)器。登錄http://localhost:8000/rest徘钥，響應(yīng)如下:
現(xiàn)在衔蹲，讓我們創(chuàng)建graphQL服務(wù)器。
在根目錄下創(chuàng)建gql-server.js文件吏饿，并輸入以下代碼踪危。
touch gql-server.js
const { ApolloServer } = require("apollo-server");
require("dotenv").config();
//graphql server
//types query/mutation/subscription
const typeDefs = `
? ? type Query {
? ? ? ? totalPosts: Int!
? ? }
`;
//resolvers
const resolvers = {
? Query: {
? ? totalPosts: () => 42,
? },
};
const apolloServer = new ApolloServer({
? typeDefs,
? resolvers,
});
apolloServer.listen(process.env.PORT, () => {
? console.log(`?? GRAPHQL Server is running at http://localhost:${process.env.PORT}`);
});
不要忘記更改package.json啟動(dòng)腳本以運(yùn)行“gql-server.js”文件蔬浙。
"scripts": {
"start": "nodemon server.js",
"test": "echo \"Error: no test specified\" && exit 1"
}
我們的Graphql默認(rèn)托管在http://localhost:8000/graphql中
yarn開始啟動(dòng)GraphQL服務(wù)器，該服務(wù)器響應(yīng)Playground如下:在查詢時(shí)贞远，我們得到以下響應(yīng)畴博。
（注意：庫中調(diào)用的遠(yuǎn)端的js文件，可能不能正常顯示）
最后蓝仲，是時(shí)候?qū)⑦@些服務(wù)器集成到一起了俱病。
我們將處理我們的server.js文件。
注意:不要忘記撤銷package.json文件中的更改以運(yùn)行server.js文件袱结。
更新你的server.js文件亮隙，使它看起來像這樣:
const { ApolloServer } = require("apollo-server-express");
const express = require("express");
require("dotenv").config();
//graphql server
//types query/mutation/subscription
const typeDefs = `
? ? type Query {
? ? ? ? totalPosts: Int!
? ? }
`;
//resolvers
const resolvers = {
? Query: {
? ? totalPosts: () => 42,
? },
};
const apolloServer = new ApolloServer({
? typeDefs,
? resolvers,
});
//express server
const app = express();
apolloServer.applyMiddleware({ app });
app.get("/rest", (req, res) => {
? res.json({
? ? data: "API is working...",
? });
});
app.listen(process.env.PORT, () => {
? console.log(`?? Server is running at http://localhost:${process.env.PORT}`);
});
在這里,變化是:
1、導(dǎo)入的apollo-server-express包:與現(xiàn)有的express服務(wù)器集成垢夹。
2溢吻、為了實(shí)現(xiàn)集成，我們使用了express server作為aploserver的中間件果元。
apolloServer.applyMiddleware({app});
完成所有更改后促王，yarn開始啟動(dòng)為rest端點(diǎn)和graphQL服務(wù)的集成服務(wù)器。
現(xiàn)在我們可以檢查我們的瀏覽器
1. http://localhost:8000/rest
2. 如上述截圖所示而晒，請?jiān)L問http://localhost:8000/graphql蝇狼。
其它：https://blog.appsignal.com/2020/06/03/building-apis-with-graphql-in-your-node-application.html
https://getstream.io/blog/tutorial-create-a-graphql-api-with-node-mongoose-and-express/
https://dev.to/givehug/next-js-apollo-client-and-server-on-a-single-express-app-55l6
https://sysgears.com/articles/how-to-create-an-apollo-react-express-application/
https://www.freecodecamp.org/news/apollo-graphql-how-to-build-a-full-stack-app-with-react-and-node-js/
