淺談NodeJS搭建GraphQL API服務

Silkage發表於2021-04-29

  GraphQL是一種透過強型別查詢語言構建api的新方法。GraphQL於2015年由Facebook釋出,目前正迅速獲得關注,並被Twitter和Github等其他大型公司所採用。

  在本文中,將帶大家使用NodeJs 搭建一個簡單的GraphQL API服務

  WEB服務:node

  資料庫:postgres

  資料查詢:

  express

  apolo-server-express

  Sequelize ORM

  graphql schema language

  graphql-sequelize

  GraphQL是什麼?

  GraphQL

  GraphQL 既是一種用於 API 的查詢語言也是一個滿足你資料查詢的執行時。 GraphQL 對你的 API 中的資料提供了一套易於理解的完整描述,使得客戶端能夠準確地獲得它需要的資料,而且沒有任何冗餘,也讓 API 更容易地隨著時間推移而演進,還能用於構建強大的開發者工具。

  簡單的說,它是API的可查詢模式,允許客戶只請求他們需要的資料,並提供了一個標準化的系統來設計API,而不需要參考文件。

  GraphQL 已有多種程式語言支援。下表包含一些流行的服務端框架、客戶端庫、服務和其他有用的內容。

  服務端庫除了 GraphQL JavaScript 參考實現,還有其他服務端庫:

  C# / .NET

  Clojure

  Elixir

  Erlang

  Go

  Groovy

  Java

  JavaScript

  PHP

  Python

  Scala

  Ruby

  為什麼選擇GraphQL

  之所以選擇GraphQL,是因為前端很多專案獲取資料需要透過多個API組裝才能獲取到所需要的資料,設計API的時候經常會考慮多應用場景,導致單個場景下呼叫會獲得多餘的資料。

  出於這個考慮,看到GraphiQL介紹,能夠為資料宣告一個模式並讓客戶端根據需要查詢所需要的資料的想法所吸引。喜歡透過網路傳輸最小數量的請求,將請求自由組合在一起以獲得最佳的有效負載,並在客戶端和伺服器上進行快取。

  GraphQL 帶來的最大好處是精簡請求響應內容,不會出現冗餘欄位,前端可以決定後端返回什麼資料。當然,前端的決定權取決於後端支援什麼資料,因此 GraphQL 更像是精簡了返回值的 REST,而後端介面也可以一次性定義完所有功能,而不需要逐個開發。

  GraphQL API 的主要應用場景是 API 閘道器,在客戶端和服務之間提供了一個抽象層。

  GraphQL特色

  Node服務

  選擇node作為伺服器端語言,因為它擁有圍繞GraphQL的非常強大的社群支援,並且高度可移植。

  在新版本中支援 async / wait,同步模型更容易管理,這在構建高度非同步的API時是一個巨大的優勢。

  ORM到GraphQL適配

  graphql-sequelize,將序列化模型對映到GraphQL型別、查詢和更新的程式碼。它提供了兩個優秀的抽象:

  用於將GraphQL查詢對映到Sequelize操作的解析器

  將模型定義作為GraphQL型別欄位列表重用的attributeFields對映。

  GraphQL schema

  接下來建立查詢型別,如下:

  // 定義查詢資料型別

  const managerType = new GraphQLObjectType({

  name: "manager",

  description: "A manager",

  fields: {

  id: {

  type: new GraphQLNonNull(GraphQLInt),

  description: "The id of the manager."

  },

  username: {

  type: GraphQLString,

  description: "The username of the manager."

  },

  password: {

  type: GraphQLString,

  description: "The password of the manager."

  },

  email: {

  type: GraphQLString,

  description: "The email of the manager."

  }

  }

  });

  // 定義查詢介面

  const schema = new GraphQLSchema({

  query: new GraphQLObjectType({

  name: "root",

  fields: {

  managers: {

  type: new GraphQLList(managerType),

  resolve: resolver(manager)

  },

  manager: {

  type: new GraphQLList(managerType),

  args: {

  username: {

  description: "username of the manager",

  type: new GraphQLNonNull(GraphQLString)

  }

  },

  resolve: resolver(manager)

  }

  }

  })

  });

  Web伺服器框架

  選擇express作為基本的web伺服器框架,是因為它在節點生態系統、外掛支援和簡單API中無處不在。

  express允許監聽埠並響應HTTP請求,但是需要另一層來接收和響應GraphQL請求。

  apollo-server-express,它有一個非常簡單的API,並進行了一些對映,以允許節點GraphQL模式語言中定義模式。如下:

  const express = require("express");

  const { ApolloServer } = require("apollo-server-express");

  const schema = require("./schema");

  const server = new ApolloServer({ schema });

  const app = express();

  server.applyMiddleware({ app });

  app.listen({ port: 3009 }, () => console.log(`? Server ready at {server.graphqlPath}`));

  除錯及文件

  瀏覽器開啟:,GraphiQL可以很容易地讓人感受到”程式碼即文件”的快樂。

  自動生成介面文件

  GraphQL除錯3

  查詢列表資料:

  {

  managers {

  username

  email

  }

  }

  GraphQL查詢列表資料

  按條件查詢:

  {

  manager(username:"QuintionTang") {

  username

  email

  }

  }

  GraphQL按條件查詢

  AJAX方式呼叫:

  const { createApolloFetch } = require("apollo-fetch");

  const fetch = createApolloFetch({

  uri: ""

  });

  fetch({

  query: "{ managers { username }}"

  }).then(res => {

  console.log(res.data);

  });

  fetch({

  query: `{

  manager(username: "QuintionTang") {

  email

  id

  }

  }`

  }).then(res => {

  console.log(res.data);

  });

  客戶端實現

  客戶端常見的框架有 Relay 和 Apollo Client。

  Relay 是由 Facebook 官方提供的解決方案

  使用 Relay 的好處是,許多 GraphQL 的服務端框架都會支援 Relay 的標準(比如資料的分頁介面)。

  Apollo 是在 GraphQL 方面熱度超高的社群

  apollo-client的實現在諸多方面宣稱自己相容 Relay 的風格,所以使用起來應該也是大同小異。

  總結

  本文只是一個簡單的實現,個人感覺概念很吸引,在複雜的專案中能否達到預期就需要在實踐過程中去體驗。


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69999013/viewspace-2770478/,如需轉載,請註明出處,否則將追究法律責任。

相關文章