使用node+apollo-server + typescript 搭建 GraphQL API

本片文章翻译一篇 使用 apollo-server + typescript 搭建 GraphQL API

为什么要使用 Typescript?

Typescript是javascript的类型化超集，可编译为纯javascript真的很棒。始于JavaScript，归于JavaScript
Typescript 用于应用程序规模的javascript开发。随着javascript代码增长、无论是前端还是后端维护和重用代码都变得越来越困难。javascript无法进行强类型检查和编译时错误检查，因此提出Typescript弥补这种差距。

利弊

?javascript 超集:将您的.js文件重命名为.ts文件?。Typescript具有易于学习的曲线,您可以逐步学习它
?先进的Javascript:TypeScript提供最新的和不断发展的JavaScript特性，包括那些来自2015年的ECMAScript和未来的提案中的特性，比如异步功能和Decorators，以帮助建立健壮的组件。
?编译: 如果Typescript发现某些语法错误,它将编译并生成编译错误。它有助于在脚本实际运行和失败之前突出错误。
?强类型:Typescript 通过TLS(Typescript Language Service)带有可选的静态类型和类型断言系统。此外还为IDE提供代码分析和自动补全功能。

??♂? 没有弊端

创建基本 typescript配置

设置项目

$ mkdir typescript-apollo-express-graphql-api
$ cd typescript-apollo-express-graphql-api
$ npm init --y

安装依赖和初始化ts

安装 Typescript 并使用 npx生成 tsconfig.json文件

npm i typescript ts-node-dev -D
npx tsc --init --rootDir src --outDir dist --lib dom,es6 --module commonjs --removeComments

输出 Hello World ?

1. 创建 /src目录和 server.ts文件

mkdir src && cd src && touch server.ts

2. 打印测试日志

// server.ts
console.log('Hey ?');

3. 调整package.json脚本如下:

  "scripts": {
    "dev": "ts-node-dev --respawn --transpileOnly ./src/server.ts",},

这样,您应该可以在终端中输入 npm run dev来启动 ts-node-dev并查看我们到打印的内容，如果文件内容更改则也会重新编译。

设置 Express,Apollo并创建一个简单的GraphQL API

如果你是GraphQL的新手,这里不会介绍这个概念，因为不是主题可以点击GraphQL介绍

安装依赖

$ npm i apollo-server-express compression cors express graphql-playground-middleware-express ncp$ npm i @types/compression  graphql-import graphql-import-node --save-dev

配置 Apollo server

//server.ts
import express from 'express'
import {
    ApolloServer} from 'apollo-server-express'
import compression from 'compression'
import expressPlayground from 'graphql-playground-middleware-express'
import cors from 'cors'
import schema from './schema'const app=express();
const server=new ApolloServer({
    schema
});
app.use('*',cors());
app.use(compression());
server.applyMiddleware({
    app});app.get('/playground',expressPlayground({
    endpoint:'/graphql'}))app.get('/',(req,res)=>{
    res.send('weclome to graphql playground');
})
app.listen(4000,()=>{
    console.log(`GraphQL Server running at http://localhost:4000${
      server.graphqlPath}`)
})

??有关配置的注意事项

• schema:之后会创建它?
• compression: Gzip压缩可以大大减小响应主体的大小，从而提高Web应用程序的速度。查看更多

创建 GraphQL schema 和 解析器(resolvers)

1. 首先、在 /src文件夹下 创建/schema文件和文件schema.graphql

$ mkdir schema && cd schema && touch schema.graphql

声明 Query type

// schema.graphqltype Query{
    helloWorld: String!}

2. 然后在 /src 文件夹下创建 resolverMap.ts文件

import {
     IResolvers } from "graphql-tools";const resolverMap: IResolvers = {
    Query: {
    helloWorld(_: void, args: void): string {
    return `Hello World`;}}
};
export default resolverMap;

3. 最后在 /src文件夹下创建 schema文件代码如下:

// schema.tsimport 'graphql-import-node'
import * as typeDefs from './schema/schema.graphql'
import {
    makeExecutableSchema} from 'graphql-tools'
import resolvers from './resolverMap'
import {
    GraphQLSchema} from 'graphql'const schema:GraphQLSchema=makeExecutableSchema({
    typeDefs,resolvers
})
export default schema

Aaaaand… 就这样,我们创建了一个 helloWorld查询。

编译代码

在package.json调整脚本文件如下:

  "scripts": {"build": "tsc && ncp src/schema dist/schema","dev": "ts-node-dev --respawn --transpileOnly ./src/index.ts","start": "node dist/index.js","prod": "npm run build && npm run start"},

在终端运行 npm run prod将会编译代码输出到/dist文件夹下并运行你编译后的代码。

如果觉得有用可以关注Thomas Guibert在Medium。

译文地址

Basic Apollo Express GraphQL API with TypeScript