使用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.graphql
 type 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.ts

import '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