使用ApolloServer和express构建GraphQL服务

使用ApolloServer和express构建GraphQL服务

初始化项目

mkdir 【项目文件】
cd 【项目文件】
npm init (一路回车)

如下：

安装依赖：

npm install @apollo/server graphql express cors body-parser nodemon

npm install --save-dev typescript @types/cors @types/express @types/body-parser ts-node

如下：

以上安装了GraphQL、apollo、express和typescript相关依赖包

生成tsconfig.json文件

npx tsc --init

该命令运行之后，会生成tsconfig.json文件，需要修改该文件，添加“outDir”：“./dist”

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "outDir": "./dist",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}

修改package.json文件

修改内容如下：

"main": "dist/server.js",



和


"scripts": {
 "build": "npx tsc",
 "start": "node dist/server.js",
 "dev": "nodemon src/server.ts"
 },

修改后的package.json文件如下

{
  "name": "apollo-express",
  "version": "1.0.0",
  "description": "",
  "main": "dist/server.js",
  "scripts": {
    "build": "npx tsc",
    "start": "node dist/server.js",
    "dev": "nodemon src/server.ts"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@apollo/server": "^4.10.1",
    "body-parser": "^1.20.2",
    "cors": "^2.8.5",
    "express": "^4.18.3",
    "graphql": "^16.8.1",
    "nodemon": "^3.1.0"
  },
  "devDependencies": {
    "@types/body-parser": "^1.19.5",
    "@types/cors": "^2.8.17",
    "@types/express": "^4.17.21",
    "ts-node": "^10.9.2",
    "typescript": "^5.4.2"
  }
}

服务主程序

创建src/server.ts文件

import { ApolloServer } from '@apollo/server';
import { expressMiddleware } from '@apollo/server/express4';
import { ApolloServerPluginDrainHttpServer } from '@apollo/server/plugin/drainHttpServer'
import express from 'express';
import http from 'http';
import cors from 'cors';
import bodyParser from 'body-parser';

// 定义GraphQL的schema
const typeDefs = `#graphql
  type Query {
    hello: String
  }
`;

// 定义GraphQL的解析器
const resolvers = {
  Query: {
    hello: () => 'Hello World!',
  },
};

const app = express();
const httpServer = http.createServer(app);

// 使用schema和resolver创建ApolloServer
const server = new ApolloServer({
  typeDefs,
  resolvers,
  plugins: [ApolloServerPluginDrainHttpServer({ httpServer })],
});

// 启动ApolloServer
server.start().then(() => {
  app.use(
    cors(),
    bodyParser.json(),
    expressMiddleware(server),
  );
  
  new Promise((resolve: any) => {
    httpServer.listen({ port: 4000 }, resolve)
  }).then(() => {
    console.log(`🚀 Server ready at http://localhost:4000`);
  });
});

测试服务

启动

npm run dev

访问localhost:4000进行测试，输入查询

query {
  hello
}

执行查询结果

{
  "data": {
    "hello": "Hello World!"
  }
}