REST API 和 Apollo GraphQL Server的比較

閱讀時間約 10 分鐘

※ REST API 和 Apollo GraphQL Server 的區別:

  1. 資料獲取方式
    • REST API:每個資源都有一個固定的 URL,並且通過 HTTP 方法(如 GET、POST、PUT、DELETE)來操作這些資源。伺服器決定返回的資料結構。
    • GraphQL:使用單一的端點(通常是 /graphql),客戶端可以根據需求查詢具體的資料。客戶端決定需要哪些資料,伺服器根據查詢返回相應的資料。
  2. 資料結構
    • REST API:資料結構是由伺服器定義的,客戶端只能接受伺服器返回的資料格式。
    • GraphQL:資料結構是由客戶端定義的,客戶端可以指定需要的資料欄位,避免過多或過少的資料傳輸。
  3. 效能與快取
    • REST API:可以利用 HTTP 快取機制來提高效能,特別是對於 GET 請求。
    • GraphQL:由於使用單一端點,無法直接利用 HTTP 快取,但可以使用客戶端快取工具(如 Apollo Client)來實現快取。

※ 何時使用 REST API:

  1. 簡單且固定的資料結構如果資料結構相對簡單且不會頻繁變動,REST API 是一個不錯的選擇。
  2. 傳統應用許多現有的應用和工具已經與 REST API 集成,這使得它在某些情況下更容易實施。
  3. HTTP 快取REST API 可以利用 HTTP 的內建快取機制來提高效能,特別是對於靜態資源。

※ 何時使用 Apollo GraphQL Server:

  1. 複雜且動態的資料需求當應用需要從多個資源中獲取資料,並且這些資料的結構可能會頻繁變動時,GraphQL 提供了更大的靈活性。
  2. 減少資料傳輸量客戶端可以根據需求查詢具體的資料欄位,避免過多或過少的資料傳輸。
  3. 客戶端快取雖然 GraphQL 無法直接利用 HTTP 的內建快取機制,但可以使用 Apollo Client 這樣具有查詢快取、快取更新、快取策略的工具來實現客戶端快取。

※ 整合 REST API 和 GraphQL常見的方法:

使用 GraphQL 作為中介層

你可以使用 GraphQL 作為中介層,將多個 REST API 整合到一個 GraphQL 端點。這樣,客戶端只需發送一個 GraphQL 查詢,就能獲取來自多個 REST API 的資料。這種方法可以減少 API 請求數量,提升效能。

2. 在 GraphQL 中調用 REST API

在 GraphQL 解析器中,你可以調用 REST API 來獲取資料。這樣,GraphQL 查詢會觸發對 REST API 的請求,並將結果返回給客戶端。這種方法適合需要從現有 REST API 獲取資料的情況。

3. 混合使用 REST API 和 GraphQL

在同一個應用中,你可以同時使用 REST API 和 GraphQL。比如,對於簡單的資料操作(如 CRUD 操作),可以使用 REST API;而對於複雜的資料查詢,則使用 GraphQL。這樣可以根據具體需求選擇最合適的技術。

Express 伺服器Apollo GraphQL 伺服器區別:

Express 伺服器

app.listen(3000, () => {
console.log('express app listen on port 3000')
})

這段代碼使用 Express 框架來啟動一個 HTTP 伺服器,並將其綁定到端口 3000。Express 是一個用於構建 Web 應用程式和 API 的 Node.js 框架。

Apollo GraphQL 伺服器

server.listen(8891, () => {
console.log('Apollo GraphQL Server run on port 8891')
});

這段代碼使用 Apollo Server 來啟動一個 GraphQL 伺服器,並將其綁定到端口 8891。Apollo Server 是一個專門用於構建 GraphQL API 的伺服器框架。

Express Apollo GraphQL 在同一個伺服器上運行

const express = require('express');
const { ApolloServer, gql } = require('apollo-server-express');

const app = express(); // 這裡創建了 Express 應用實例

// 定義 REST API 路由
app.get('/api', (req, res) => {
res.send('Hello from REST API!');
});

// 定義 GraphQL Schema
const typeDefs = gql`
type Query {
hello: String
}
`;

// 定義 Resolvers
const resolvers = {
Query: {
hello: () => 'Hello from GraphQL!',
},
};

// 創建 Apollo Server 實例
const server = new ApolloServer({ typeDefs, resolvers });

// 將 Apollo Server 中間件應用於 Express 應用
server.start().then(() => {
server.applyMiddleware({ app }); // 這裡的 { app } 就是指上面創建的 Express 應用實例

// 啟動伺服器
app.listen(3000, () => {
console.log('Server is running on http://localhost:3000');
console.log(`GraphQL endpoint: http://localhost:3000${server.graphqlPath}`);
});
});

※ 同時啟動Express Apollo GraphQL 伺服器功用:

  1. 即時更新效果:如果想在瀏覽器中即時看到網頁的變化,通常會啟動一個 HTTP 伺服器(例如使用 Express)。就可以在本地開發環境中測試和查看網頁應用程式。
  2. 內部開發和維護 API:如果想開發和維護 GraphQL API,則需要啟動一個 GraphQL 伺服器(例如使用 Apollo Server)。就可以使用工具如 Apollo Studio 來查看和管理 GraphQL Schema、查詢性能、錯誤追蹤等。

這兩者並不是互斥的。可以在同一個應用中同時啟動 HTTP 伺服器和 GraphQL 伺服器,這樣既可以即時查看網頁變化,也可以開發和維護你的 API。


※ GraphQL 特別適合處理以下幾種類型的複雜資料查詢:

  1. 多層次關聯數據:當需要查詢多個相關數據時,GraphQL 可以在一次請求中獲取所有需要的數據。例如,查詢一個用戶及其所有文章和每篇文章的評論。
  2. 客製化數據需求:當不同的客戶端需要不同的數據時,GraphQL 可以讓客戶端指定他們需要的數據,避免過多或過少的數據傳輸。例如,移動應用和桌面應用可能需要不同的數據格式。
  3. 多數據源整合:當需要從多個數據源獲取數據時,GraphQL 可以將這些數據源整合在一起,提供統一的查詢接口。例如,從資料庫、第三方 API 和內部服務中獲取數據。
  4. 動態查詢:當查詢需求經常變化時,GraphQL 可以讓開發者靈活地定義和修改查詢,而不需要改變後端代碼。例如,根據用戶的不同需求動態生成查詢。
  5. 減少多次請求:當需要多次請求才能獲取所有需要的數據時,GraphQL 可以在一次請求中獲取所有數據,減少網絡延遲和資源消耗。例如,查詢一個產品及其相關的評論和評分。

※ REST API 的常見應用:

  1. 數據檢索和操作:這是最基本的功能,包括使用 GET、POST、PUT 和 DELETE 方法來檢索和操作數據。
  2. 身份驗證和授權:REST API 可以用來實現用戶身份驗證和授權,確保只有授權用戶才能訪問特定資源。
  3. 文件上傳和下載:REST API 可以用來處理文件的上傳和下載,這在許多應用中非常常見。
  4. 通知和消息推送:REST API 可以用來實現即時通知和消息推播,這對於即時通訊應用和通知系統非常有用。
  5. 數據同步:REST API 可以用來在不同系統之間同步數據,確保數據的一致性和最新性。
  6. 第三方整合:REST API 可以用來與第三方服務進行整合,例如支付平台、地圖服務和社群媒體平台。

※ 專業後端工程師需具備的技能:

  1. REST API 
  2. Apollo GraphQL Server 

原因:

有時候一個項目可能需要同時使用 REST API 和 GraphQL,掌握這兩種技術可以更好地整合和實現。


    全端網頁開發專業知識分享
    留言0
    查看全部
    發表第一個留言支持創作者!
    ※ 什麼是GraphQL? GraphQL 是由 Facebook 於 2015 年開發的一種 API 查詢語言。客戶端(前端)只會接收到所需的數據,減少了不必要的數據傳輸和多次請求的需要,提高了應用程序的性能和效率。GraphQL 支持查詢、變更和即時更新操作,解決了傳統 REST API 中的
    ※ Express串接MySQL相關套件介紹 ★ Express 資料庫設定套件,mysqljs和 mysql2比較 相同點:都是讓 Node.js 能使用 MySQL 的套件 (package)。安裝之後我們就能在 Node.js application 裡使用 SQL 指令,操作 SQL
    ※ 設定首頁路由兩種寫法: ● res.send() // 設定首頁路由 app.get('/', (req, res) => { res.send('hello world') }) 說明: 功能:res.send() 用於發送 HTTP 回應消息。它可以發送字符串、Buffer、對
    ※ Schema Design 小測驗 ● 測驗一:電商平台是後端開發最基本的例子 幫電商平台設計一個SQL Database Schema,需要保存商品資料、顧客資料、訂單資料… 輔助設計Schema的工具: https://drawsql.app 優點: 網頁版,方便使用。 功能
    ※ Schema 設計 ● 什麼是Schema? Schema 是用來描述資料庫內的表格結構、欄位格式以及表格之間的關聯。它定義了資料庫的邏輯結構,確保資料的組織和存取方式一致。 思考點:資料以什麼「形式」保存在資料庫? 資料在資料庫中以多種形式保存,主要包括以下幾種: 表格 (Table
    ※ 安裝 MySQL server 官網下載(Windows 版本) MySQL Installer  的官方下載頁:https://dev.mysql.com/downloads/installer/ MySQL Installer 是一個方便的工具,可以幫助你一次性安裝多個 MySQL 產
    ※ 什麼是GraphQL? GraphQL 是由 Facebook 於 2015 年開發的一種 API 查詢語言。客戶端(前端)只會接收到所需的數據,減少了不必要的數據傳輸和多次請求的需要,提高了應用程序的性能和效率。GraphQL 支持查詢、變更和即時更新操作,解決了傳統 REST API 中的
    ※ Express串接MySQL相關套件介紹 ★ Express 資料庫設定套件,mysqljs和 mysql2比較 相同點:都是讓 Node.js 能使用 MySQL 的套件 (package)。安裝之後我們就能在 Node.js application 裡使用 SQL 指令,操作 SQL
    ※ 設定首頁路由兩種寫法: ● res.send() // 設定首頁路由 app.get('/', (req, res) => { res.send('hello world') }) 說明: 功能:res.send() 用於發送 HTTP 回應消息。它可以發送字符串、Buffer、對
    ※ Schema Design 小測驗 ● 測驗一:電商平台是後端開發最基本的例子 幫電商平台設計一個SQL Database Schema,需要保存商品資料、顧客資料、訂單資料… 輔助設計Schema的工具: https://drawsql.app 優點: 網頁版,方便使用。 功能
    ※ Schema 設計 ● 什麼是Schema? Schema 是用來描述資料庫內的表格結構、欄位格式以及表格之間的關聯。它定義了資料庫的邏輯結構,確保資料的組織和存取方式一致。 思考點:資料以什麼「形式」保存在資料庫? 資料在資料庫中以多種形式保存,主要包括以下幾種: 表格 (Table
    ※ 安裝 MySQL server 官網下載(Windows 版本) MySQL Installer  的官方下載頁:https://dev.mysql.com/downloads/installer/ MySQL Installer 是一個方便的工具,可以幫助你一次性安裝多個 MySQL 產
    你可能也想看
    Google News 追蹤
    Thumbnail
    這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
    Thumbnail
    ※ 什麼是Web API API 就是後端開出來讓前端來用的介面,讓前端與後端可以溝通。 API流程: 終端使用者用任何一種裝置進入瀏覽器。 瀏覽器透過 API 向後端發出請求,請求查詢或修改資料。 後端透過 API 收到前端的請求後,取得資料並回應給前端。 前端渲染畫面,終端使用者
    Thumbnail
    ※ 原本狀態:伺服器渲染 這是 MVC 架構下的 request / response 示意圖,在這張圖呈現的架構裡,畫面和資料都由同一個架構處理。 伺服器渲染流程: 瀏覽器針對特定網址送出請求。 路由器解析請求後,轉接給對應的 controller。 controller 按照要求,透過
    Thumbnail
    ※ 靜態資源回傳 ※ 什麼是靜態資源: 定義:是指事先準備好的資源,這些資源在伺服器上是靜態的、不會隨著每個請求而改變。 資源通常包括: 靜態 HTML 文件。 CSS。 圖像(Image)。 Video。 字體文件:google fonts。 favicon:網頁名稱旁邊的ico
    Thumbnail
    需求情境: 在設計畫面時,資料來源是後台的 api,每一次畫面細節的修修改改,都會觸發 Xcode Preview 程序,導致不斷呼叫後台。此時若資料結構和大小都具有一定規模,就會導致效率低落,不斷等待,且消耗伺服器資源甚鉅。 解決方案: 將後台傳回的資料以檔案形式暫存在本地端,每次 pr
    Thumbnail
    雲端已經成為App開發的核心,而Amazon的AWS(Amazon Web Services是開發者常用的平台,可以幫助開發者建立、整合和擴展App。
    Thumbnail
    此為不負責任教學,介面操作依實際情況而有所異動 額外資源參考 [API] 串接 Imgur API 圖床服務,上傳到指定相簿 israynotarray超完整 Express Imgur 套件上傳教學 [前端筆記] 用 axios 串接 imgur API上傳圖片
    Thumbnail
    ※ 基本操作:SQL 語法,SELECT, WHERE, CREATE, UPDATE, DELETE。 SELECT:從資料庫中或資料表中指定要選擇的欄位中取得資料,稱之為查詢 (query)。 ※ 語法:要由兩部分構成,第一部分是要 "拿什麼" 資料 (若有多項用逗號隔開);第二部分則為
    Thumbnail
    gRPC是一款跨平台、高性能的RPC框架,他可以在任何環境下執行,主要用於後端為服務開發。在用戶端應用程式中,可以像本地物件那樣呼叫遠端伺服器的方法,因此可以創建出分散式應用。 使用 到https://github.com/protocolbuffers/protobuf/releases下
    Thumbnail
    Request內容 package main import ( "fmt" "log" "net/http" "strings" ) func request(w http.ResponseWriter, r *http.Request) { //這些資訊是輸出到伺服器端的列印訊息
    Thumbnail
    Accept:用戶端能夠接收的內容類型。 Accept: text/plain, text/html Accept-Charset:瀏覽器可以接受的字元編碼集。 Accept-Charset: utf8 Accept-Encoding:指定瀏覽器可以支援的web伺服器返回內容壓縮編碼
    Thumbnail
    這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
    Thumbnail
    ※ 什麼是Web API API 就是後端開出來讓前端來用的介面,讓前端與後端可以溝通。 API流程: 終端使用者用任何一種裝置進入瀏覽器。 瀏覽器透過 API 向後端發出請求,請求查詢或修改資料。 後端透過 API 收到前端的請求後,取得資料並回應給前端。 前端渲染畫面,終端使用者
    Thumbnail
    ※ 原本狀態:伺服器渲染 這是 MVC 架構下的 request / response 示意圖,在這張圖呈現的架構裡,畫面和資料都由同一個架構處理。 伺服器渲染流程: 瀏覽器針對特定網址送出請求。 路由器解析請求後,轉接給對應的 controller。 controller 按照要求,透過
    Thumbnail
    ※ 靜態資源回傳 ※ 什麼是靜態資源: 定義:是指事先準備好的資源,這些資源在伺服器上是靜態的、不會隨著每個請求而改變。 資源通常包括: 靜態 HTML 文件。 CSS。 圖像(Image)。 Video。 字體文件:google fonts。 favicon:網頁名稱旁邊的ico
    Thumbnail
    需求情境: 在設計畫面時,資料來源是後台的 api,每一次畫面細節的修修改改,都會觸發 Xcode Preview 程序,導致不斷呼叫後台。此時若資料結構和大小都具有一定規模,就會導致效率低落,不斷等待,且消耗伺服器資源甚鉅。 解決方案: 將後台傳回的資料以檔案形式暫存在本地端,每次 pr
    Thumbnail
    雲端已經成為App開發的核心,而Amazon的AWS(Amazon Web Services是開發者常用的平台,可以幫助開發者建立、整合和擴展App。
    Thumbnail
    此為不負責任教學,介面操作依實際情況而有所異動 額外資源參考 [API] 串接 Imgur API 圖床服務,上傳到指定相簿 israynotarray超完整 Express Imgur 套件上傳教學 [前端筆記] 用 axios 串接 imgur API上傳圖片
    Thumbnail
    ※ 基本操作:SQL 語法,SELECT, WHERE, CREATE, UPDATE, DELETE。 SELECT:從資料庫中或資料表中指定要選擇的欄位中取得資料,稱之為查詢 (query)。 ※ 語法:要由兩部分構成,第一部分是要 "拿什麼" 資料 (若有多項用逗號隔開);第二部分則為
    Thumbnail
    gRPC是一款跨平台、高性能的RPC框架,他可以在任何環境下執行,主要用於後端為服務開發。在用戶端應用程式中,可以像本地物件那樣呼叫遠端伺服器的方法,因此可以創建出分散式應用。 使用 到https://github.com/protocolbuffers/protobuf/releases下
    Thumbnail
    Request內容 package main import ( "fmt" "log" "net/http" "strings" ) func request(w http.ResponseWriter, r *http.Request) { //這些資訊是輸出到伺服器端的列印訊息
    Thumbnail
    Accept:用戶端能夠接收的內容類型。 Accept: text/plain, text/html Accept-Charset:瀏覽器可以接受的字元編碼集。 Accept-Charset: utf8 Accept-Encoding:指定瀏覽器可以支援的web伺服器返回內容壓縮編碼