网站建设空间大小,乐清门户网站建设,wordpress导入doc,网站做兼容需要多少钱接上一篇文章#xff0c;由于 express 现在仍然是主流的 Node.js 服务端框架#xff0c;所以今天看看 ApolloServer 怎样和 express 集成构建 GraphQL 服务。另外今天文章也顺便讲一下怎么使用 typescript 来实现。
初始化项目
mkdir myapp
cd myapp
npm init (一路回车)安…接上一篇文章由于 express 现在仍然是主流的 Node.js 服务端框架所以今天看看 ApolloServer 怎样和 express 集成构建 GraphQL 服务。另外今天文章也顺便讲一下怎么使用 typescript 来实现。
初始化项目
mkdir myapp
cd myapp
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这里安装了包括 graphqlapolloexpress 和 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 #graphqltype 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访问 http://localhost:4000 进行测试输入查询
query {hello
}执行查询结果
{data: {hello: Hello World!}
}
