GraphQL 與 RESTful API 應用的場景與分析

更新 發佈閱讀 8 分鐘
網路上已經有很多相關這兩者的討論,單純的討論兩者的理念我認為還是很難決定要在哪些場景使用,因此這裡會針對實現這兩者介面所需要做的事情來比較這裡會先略過 權限驗證、流量限制、快取、遞迴查詢… 等等 GraphQL 常常被提及的問題,這些可以透過使用 GraphQL 生態系中的工具 如 Hasura、Prisma 來處理

GraphQL 與 RESTful API 差異介紹文章

How to GraphQL — The Fullstack Tutorial for GraphQL

GraphQL Vs. REST APIs | GraphCMS

REST vs GraphQL APIs, the Good, the Bad, the Ugly | Moesif Blog

GraphQL vs REST: Difference between GraphQL and REST API (guru99.com)

以後端來看,如何實現 GraphQL 與 RESTful API

GraphQL
透過實現一組 Post 端點對外,並且由 schema 與 resolvers 這兩個元件所組成

  • schema 決定了數據的長相
  • resolvers 決定了處理需求的方式

因此當我們開發一個 Order 的 GraphQL API 時,我們會需要
1. 定義 Order 表的 schema
2. 撰寫針對 Order 表行為的 resolvers,Queries and Mutations (Execution | GraphQL)
3. 透過 GraphQL 生態系提供的監測工具與跟前端溝通,針對常下的查詢條件對資料庫進行 Index 的建立與快取優化

這樣當前端使用到 Order 這個 schema 時就可以透過我們自定義的 resolvers 來執行相對應的行為,且能僅拿需要的欄位來避免過度撈取

如果需要複數的 schema 資料,僅需在發送請求時要求聚合的 schema 即可

RESTful API
透過多組 API 端口並用各種 HTTP request methods 來實現服務,基本上由 dto 與 logic 這兩個元件所組成

  • dto 全稱為 數據傳輸對象 (Data transfer object),為與前端溝通時的結構
  • logic 這裡指的是後端業務邏輯,針對每一組 API 來設計不同的業務流程

因此當我們開發一個 Order 的 RESTful API 時,我們會需要
1. 定義 Order API 的增刪修查用的 dto
2. 設計增刪用的 API 端點

增 (post) /order
刪 (delete) /order
修 (put) /order
查全部 (get) /order
查特定 id (get) /order/{id}

3. 針對不同 HTTP request methods 的端點撰寫業務邏輯
4. 針對設計上規範的查詢條件優化資料庫的 Index 與快取

這樣當前端需要針對 Order 這個資源操作時,就可以選擇相對應的 API 端點來做操作

如果需要複數的資源的資料,如 Order 與 Product ,會有兩種方案
1. 前端呼叫兩隻 API 來取得資料並在前端拼裝資料,而此缺點會有取得不必要欄位與多次請求造成的效能損耗

2. 後端再定義一組新的 dto 與 logic 來針對新的資源做查詢,如 OrderInfo,可以針對目前需要的欄位進行設計,但針對性強所以不一定能有效複用

以前端來看,如何對接 GraphQL 與 RESTful API

GraphQL
統一的資源取得 Url,且限定使用 Post,基本上可以透過套件來簡化這樣的連接行為,僅需要關注在組合 schema 來取得需要的欄位資料

當我們開發一個 Order 的 GraphQL API 頁面時,我們會需要
1. 取得 GraphQL Server 定義的 schema 與 mutations列表
2. 選擇 Order 的 schema 來做請求
3. 對著 GraphQL Url 發送 Order schema 並選擇需要的欄位與需要用的 Queries 或 Mutation
4. 依據 GraphQL 的語言約定,來進行操作
5. 獲取資料並呈現

RESTful API
每一個資源對應到不同的 API Url,針對想要做的 CRUD 動作選擇對應的 HTTP request methods 進行呼叫

因此當我們開發一個 Order 的 RESTful API 頁面時,我們會需要
1. 取得 RESTful API 定義的 API 列表,可以透過 swagger 或後端提供的文件
2. 針對不同頁面選擇合適的 Order API
3. 依據前後端約定的 API 格式與互動方法來進行交互,如資源定義的結構與分頁指定的 Index …等
4. 獲取資料並呈現

結論

GraphQL 定義了一個前後端實現交互的約定規範,也給予了前端很大程度取得資料的彈性

適合 C 端產品,多變化的功能需求與跨平台可能性(web、mobile)與高度的效能要求,給予前端獲取資料的彈性呈現畫面

RESTful API 僅針對了風格與建議使用 HTTP request methods 來作行為的標註,較多邏輯與欄位的呈現是控制在後端,導致了每一個 API 的功能的專一性會較強,如共通使用會有多餘的欄位或多次訪問造成 API 較慢的呈現時間

適合 B端產品,欄位與行為上由後端控制的做法不見得不好,多數儀表板應用應用較常使用這樣的方式來實作,也可以降低前端獲取資料的複雜度與降低資料庫優化的難度

但不論是用 GraphQL 還是 RESTful API,都需要前後端釐清業務場景來設計 DB Schema 與快取優化,而不是用了 GraphQL 或是 RESTful API 就可以把所有問題丟給前端或後端,亦不是 GraphQL 就可以取代 RESTful API,還是要看團隊配合與產品特性而定

參考資料

How to GraphQL — The Fullstack Tutorial for GraphQL

GraphQL Vs. REST APIs | GraphCMS

REST vs GraphQL APIs, the Good, the Bad, the Ugly | Moesif Blog

GraphQL vs REST: Difference between GraphQL and REST API
(guru99.com)
REST API Tutorial

GraphQL 后端架构的经验分享 (pupboss.com)

Queries and Mutations (Execution | GraphQL)

留言
avatar-img
Sponge | 一塊海綿的沙龍
6會員
10內容數
分享網站開發的前端、後端、資料庫與部屬維運技術,並記錄在工作上的心得
2023/02/20
Hhost 是一個基於 Hasura 並且整合了 Serverless、PostgreSQL、Auth、Storage 的一體化 BaaS 服務,主要的假想敵為 Firebase 而目標是將網站系統開發盡可能的精簡與可拓展化。
Thumbnail
2023/02/20
Hhost 是一個基於 Hasura 並且整合了 Serverless、PostgreSQL、Auth、Storage 的一體化 BaaS 服務,主要的假想敵為 Firebase 而目標是將網站系統開發盡可能的精簡與可拓展化。
Thumbnail
2023/02/19
PaaS 是指平台即服務(platform as a service),意思是可以透過管理介面執行設定與部署而不需要處理底層的伺服器運作與維護。
Thumbnail
2023/02/19
PaaS 是指平台即服務(platform as a service),意思是可以透過管理介面執行設定與部署而不需要處理底層的伺服器運作與維護。
Thumbnail
2023/02/18
在網頁服務中資料庫擔任了很重要的任務,用來保存客戶的資料與提供分析的數據來源,而針對不同的需求會有各類型適合資料庫來負責。 這篇文章中會針對 Row-Oriented (以列為儲存主體) 和 Columnar (以行為儲存主體) 的兩種資料庫來分析任務與資料庫間的合適搭配。
Thumbnail
2023/02/18
在網頁服務中資料庫擔任了很重要的任務,用來保存客戶的資料與提供分析的數據來源,而針對不同的需求會有各類型適合資料庫來負責。 這篇文章中會針對 Row-Oriented (以列為儲存主體) 和 Columnar (以行為儲存主體) 的兩種資料庫來分析任務與資料庫間的合適搭配。
Thumbnail
看更多
你可能也想看
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
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
每次看到 REST 就讓我想起以前念研究所和老師一起想論文題目時,曾提過國外常會玩這種文字遊戲,像是將 Representational State Transfer 變成一個很簡單的單字 REST,但我的東西不管怎麼想,卻想不出什麼有趣的東西 Orz
Thumbnail
每次看到 REST 就讓我想起以前念研究所和老師一起想論文題目時,曾提過國外常會玩這種文字遊戲,像是將 Representational State Transfer 變成一個很簡單的單字 REST,但我的東西不管怎麼想,卻想不出什麼有趣的東西 Orz
Thumbnail
🚀 在Gin中整合GraphQL和MongoDB:靈活的數據查詢 隨著Web應用的複雜度增加,開發者尋找更靈活和高效的方式來查詢和操作數據。GraphQL作為一種查詢語言,允許用戶精確地指定他們想要的數據,而MongoDB作為一個靈活的NoSQL數據庫,可以很好地支持這種查詢。結合這兩者,我
Thumbnail
🚀 在Gin中整合GraphQL和MongoDB:靈活的數據查詢 隨著Web應用的複雜度增加,開發者尋找更靈活和高效的方式來查詢和操作數據。GraphQL作為一種查詢語言,允許用戶精確地指定他們想要的數據,而MongoDB作為一個靈活的NoSQL數據庫,可以很好地支持這種查詢。結合這兩者,我
Thumbnail
Restful API 其實就是開放一個 EndPoit 的網路接口給其他人使用,並將要做的事情封裝在該接口內,不需要知道真實運作狀況,只要得到答案即可。
Thumbnail
Restful API 其實就是開放一個 EndPoit 的網路接口給其他人使用,並將要做的事情封裝在該接口內,不需要知道真實運作狀況,只要得到答案即可。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
不論是 GraphQL 與 RESTful API 都需要生態系的支撐,才會好用與完整 這篇會先介紹 GraphQL 的生態系工具。
Thumbnail
不論是 GraphQL 與 RESTful API 都需要生態系的支撐,才會好用與完整 這篇會先介紹 GraphQL 的生態系工具。
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
Hasura 是一個開源、高性能、多資料來源與嚴謹權限控管的 GraphQL Engine Service。
Thumbnail
Hasura 是一個開源、高性能、多資料來源與嚴謹權限控管的 GraphQL Engine Service。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這裡會針 GraphQL 與 RESTful API 這兩者介面所需要做的事情來比較其應用的場景。
Thumbnail
這裡會針 GraphQL 與 RESTful API 這兩者介面所需要做的事情來比較其應用的場景。
Thumbnail
隨著Web應用的發展,前端和後端的需求也在變得越來越複雜。RESTful APIs已經不再滿足當前的需求,而GraphQL作為一個新興的數據查詢語言,提供了更靈活的查詢能力。在這篇文章中,我們將探討如何在Gin中實現GraphQL API,為你的應用帶來現代化的數據查詢。
Thumbnail
隨著Web應用的發展,前端和後端的需求也在變得越來越複雜。RESTful APIs已經不再滿足當前的需求,而GraphQL作為一個新興的數據查詢語言,提供了更靈活的查詢能力。在這篇文章中,我們將探討如何在Gin中實現GraphQL API,為你的應用帶來現代化的數據查詢。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News