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,掌握這兩種技術可以更好地整合和實現。


留言
avatar-img
留言分享你的想法!
avatar-img
奧莉薇走在成為後端工程師之路上
22會員
164內容數
全端網頁開發專業知識分享
2025/04/26
※ 場景: 即時聊天應用: 設計一個支持多房間功能的即時聊天平台,像 WhatsApp、LINE或Facebook Messenger,提供文字、語音、視訊聊天功能,方便管理群組聊天。 功能亮點:加入特別功能,例如可加入多房間功能、使用者名單、表情符號支持、文件分享或訊息已讀未讀狀態。 展示
2025/04/26
※ 場景: 即時聊天應用: 設計一個支持多房間功能的即時聊天平台,像 WhatsApp、LINE或Facebook Messenger,提供文字、語音、視訊聊天功能,方便管理群組聊天。 功能亮點:加入特別功能,例如可加入多房間功能、使用者名單、表情符號支持、文件分享或訊息已讀未讀狀態。 展示
2025/04/26
※ 先建立基本的express後端服務: 1.建立新資料夾:Socket mkdir socket 2.進入資料夾:Socket cd ​bsocket 3. 安裝 Experss 到專案中 npm init -y //初始化專案,建立 package.json 檔 npm insta
Thumbnail
2025/04/26
※ 先建立基本的express後端服務: 1.建立新資料夾:Socket mkdir socket 2.進入資料夾:Socket cd ​bsocket 3. 安裝 Experss 到專案中 npm init -y //初始化專案,建立 package.json 檔 npm insta
Thumbnail
2025/04/10
※ 什麼是 Socket.io:一個基於傳統 WebSocket API 之上的框架。 ※ Socket.io常用功能: Custom Events:在 Socket.io 中,開發者可以創建自己的事件來處理特定的功能或需求。 Rooms:分組的功能。每個連接的用戶(或稱為 socket)可
Thumbnail
2025/04/10
※ 什麼是 Socket.io:一個基於傳統 WebSocket API 之上的框架。 ※ Socket.io常用功能: Custom Events:在 Socket.io 中,開發者可以創建自己的事件來處理特定的功能或需求。 Rooms:分組的功能。每個連接的用戶(或稱為 socket)可
Thumbnail
看更多
你可能也想看
Thumbnail
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
本文深入探討 Web API 與 HTTP 協議,解釋 HTTP 請求方法 (GET, POST, PUT, PATCH, DELETE)、HTTP 結構 (Headers, Body, 狀態碼),。透過說明各種 HTTP 狀態碼,讀者可以更深入理解 Web API 的設計與應用。
Thumbnail
本文深入探討 Web API 與 HTTP 協議,解釋 HTTP 請求方法 (GET, POST, PUT, PATCH, DELETE)、HTTP 結構 (Headers, Body, 狀態碼),。透過說明各種 HTTP 狀態碼,讀者可以更深入理解 Web API 的設計與應用。
Thumbnail
※ 什麼是Apollo GraphQL Server? Apollo GraphQL Server 是一個將GraphQL的標準轉化為實際可用的工具和框架,可以在Node.js 常用的中介軟體像是 Express 或 Fastify 所建立的伺服器中,輕鬆加入和設定 Apollo GraphQL
Thumbnail
※ 什麼是Apollo GraphQL Server? Apollo GraphQL Server 是一個將GraphQL的標準轉化為實際可用的工具和框架,可以在Node.js 常用的中介軟體像是 Express 或 Fastify 所建立的伺服器中,輕鬆加入和設定 Apollo GraphQL
Thumbnail
※ 什麼是GraphQL? GraphQL 是由 Facebook 於 2015 年開發的一種 API 查詢語言。客戶端(前端)只會接收到所需的數據,減少了不必要的數據傳輸和多次請求的需要,提高了應用程序的性能和效率。GraphQL 支持查詢、變更和即時更新操作,解決了傳統 REST API 中的
Thumbnail
※ 什麼是GraphQL? GraphQL 是由 Facebook 於 2015 年開發的一種 API 查詢語言。客戶端(前端)只會接收到所需的數據,減少了不必要的數據傳輸和多次請求的需要,提高了應用程序的性能和效率。GraphQL 支持查詢、變更和即時更新操作,解決了傳統 REST API 中的
Thumbnail
REST(REpresentational State Transfer)是一種WWW的Web架構,常被使用於JSON或XML的Web服務,而符合REST原則的系統就稱為RESTful。REST API(RESTful API)是一種符合REST的API應用。 方法說明 GET:向伺服器取得
Thumbnail
REST(REpresentational State Transfer)是一種WWW的Web架構,常被使用於JSON或XML的Web服務,而符合REST原則的系統就稱為RESTful。REST API(RESTful API)是一種符合REST的API應用。 方法說明 GET:向伺服器取得
Thumbnail
隨著Web應用的發展,前端和後端的需求也在變得越來越複雜。RESTful APIs已經不再滿足當前的需求,而GraphQL作為一個新興的數據查詢語言,提供了更靈活的查詢能力。在這篇文章中,我們將探討如何在Gin中實現GraphQL API,為你的應用帶來現代化的數據查詢。
Thumbnail
隨著Web應用的發展,前端和後端的需求也在變得越來越複雜。RESTful APIs已經不再滿足當前的需求,而GraphQL作為一個新興的數據查詢語言,提供了更靈活的查詢能力。在這篇文章中,我們將探討如何在Gin中實現GraphQL API,為你的應用帶來現代化的數據查詢。
Thumbnail
不論是 GraphQL 與 RESTful API 都需要生態系的支撐,才會好用與完整 這篇會先介紹 GraphQL 的生態系工具。
Thumbnail
不論是 GraphQL 與 RESTful API 都需要生態系的支撐,才會好用與完整 這篇會先介紹 GraphQL 的生態系工具。
Thumbnail
這裡會針 GraphQL 與 RESTful API 這兩者介面所需要做的事情來比較其應用的場景。
Thumbnail
這裡會針 GraphQL 與 RESTful API 這兩者介面所需要做的事情來比較其應用的場景。
Thumbnail
講完 get 來講 post,那這兩個 call api 的方法有什麼差別呢?先記得一個原則,要傳遞機密的資料用 post,如果要傳遞的參數被別人知道也無所謂就用 get post 是傳遞資料到後台,資料不會顯示在 url 上,get 是傳遞參數到後台,參數會直接顯示在 url 上和後端的終端上,像
Thumbnail
講完 get 來講 post,那這兩個 call api 的方法有什麼差別呢?先記得一個原則,要傳遞機密的資料用 post,如果要傳遞的參數被別人知道也無所謂就用 get post 是傳遞資料到後台,資料不會顯示在 url 上,get 是傳遞參數到後台,參數會直接顯示在 url 上和後端的終端上,像
Thumbnail
前端和後端溝通,最常用就是 get 和 post 後端 先在 django 專案這邊的 views.py 內建立一個讓前端以 get 方法呼叫的 api function1 內的第一個參數是前端的 request,之後第二個參數第三個參數可以隨便你設,這倒是沒有限制 用 request.GET 這個
Thumbnail
前端和後端溝通,最常用就是 get 和 post 後端 先在 django 專案這邊的 views.py 內建立一個讓前端以 get 方法呼叫的 api function1 內的第一個參數是前端的 request,之後第二個參數第三個參數可以隨便你設,這倒是沒有限制 用 request.GET 這個
Thumbnail
接下來要講前後端怎麼溝通,最常見應該都是用 axios, ajax 或 fetch 來 call api。先講結論,個人推薦使用 axios,那他們又有什麼優缺點呢?讓我簡單講解一下 ajax ajax 用法有點麻煩,要先引入 jQuery,用法如下 ajax 比起 axios 較為笨重也較不安全
Thumbnail
接下來要講前後端怎麼溝通,最常見應該都是用 axios, ajax 或 fetch 來 call api。先講結論,個人推薦使用 axios,那他們又有什麼優缺點呢?讓我簡單講解一下 ajax ajax 用法有點麻煩,要先引入 jQuery,用法如下 ajax 比起 axios 較為笨重也較不安全
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News