Coding Hero

We solve your problems

Node.js Apollo Server 介紹 (1)

2019-10-13 Brianapollo server

apollo-graphql.jpg

使用 Apollo Server 快速為你建造 Node.js GraphQL API。


前言


想當初在專案中,取資料用的不是純 Rest API,Server 總是吐一堆我可能不需要用的資料,想一次在 request 中幫我完成我想要的巢狀結構,只能苦苦哀求後端工程師請幫我開這隻 API ,後端在設計上為了符合畫面需求,開到最後都不 Rest 了。

就在一次公司讀書會時 Team Lead 分享這神奇玩意時,並要求我在下個專案要用 GraphQL ,經過百般研究,閱懶無數影片文章 😴,使用 Apollo Server 這套開發方式,是目前我最推薦的,當然還有整合資料庫 連 schema 都會自己產生 (Prisma)[https://www.prisma.io/docs],但這種整合越多服務,到時候要維護,絕對是一個頭兩個大。


What is Apollo Server?


Apollo Server 是一個快速而且易於讓後端人員,建立 GraphQl API 的工具,相較於 Rest API,也許您已經搜尋過 GraphQL 與 RestFul 的差別了。


就我們實際導入專案後,整理出優點以下:

graphql-playground.png

  • playgroud 介面,非常直覺,也可以加上欄位註解說明
  • 前端需要什麼欄位,由前端去決定,後端開 API,就如何喝水一樣簡單
  • 後端程式碼更動,前端開發環境會跳出提示的 GraphManager

安裝步驟


首先建立專案資料夾:

$ mkdir apollo-server-example

進入專案資料夾:

$ cd apollo-server-example

建立 package.json:

$ npm init -y

接著安裝所需套件:

$ npm install apollo-server-express graphql

因為我習慣 ES6 開發 Node JS 所以使用 esm:

$ npm install esm

更改一下 package.json 的 script:

script:{
  "start": "node -r esm",
  "dev": "nodemon -r esm ",
}

建立 index.js 檔案:

$ touch index.js

將以下內容貼至 index.js:

// 1.引入套件
import { ApolloServer, gql } from "apollo-server-express"
import express from "express"

// 2.新增電影列表
let movies = [
  { id: "1", name: "炮仔聲", author: "a1" },
  { id: "2", name: "刺激1995", author: "a2" },
  { id: "3", name: "返校", author: "a3" }
]

// 3.新增作者列表
let authors = [{ id: "a1", name: "Brian" }, { id: "a2", name: "Frank" }, { id: "a3", name: "Alan" }]

// 4.定義 graphql type
const typeDefs = gql`
  "電影"
  type Movie {
    id: ID
    name: String
    author: Author
  }
  "作者"
  type Author {
    id: ID
    name: String
  }

  type Query {
    "所有電影"
    movies: [Movie]
    "單一電影"
    movie(id: ID): Movie
  }
`

// 5.定義 graphql resolver
const resolvers = {
  Query: {
    movies: () => movies,
    movie: (_root, args) => movies.find(item => item.id === args.id)
  },
  // resolverMap
  Movie: {
    author: parent => authors.find(item => item.id === parent.author)
  }
}

// 6.Apollo Server引入剛剛定義好的type與resolver
const server = new ApolloServer({
  typeDefs,
  resolvers
})

// 7.GraphQL server that works with all Node.js HTTP server frameworks: Express
const app = express()
app.set("port", 8081)
server.applyMiddleware({ app })

app.listen({ port: 8081 }, () =>
  console.log(`🚀 Server ready at http://localhost:8081${server.graphqlPath}`)
)

Run 程式碼:

$ npm run dev

總結


開 API 的步驟其實就是

  • 定義 type
  • 在 resolver 寫取資料的邏輯
  • resolver map 寫巢狀查詢,也可以寫客製化的欄位(ex: 加總、lastName + firstName)
  • 測試 API 是否正常

在這篇文章後續也有一些相關文章,將在後續提供

  • GraphManager
  • ApolloClient
  • Mutation 操作
  • 巢狀查詢