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
留言分享你的想法!
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
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
🚀 在Gin中整合GraphQL和MongoDB:靈活的數據查詢 隨著Web應用的複雜度增加,開發者尋找更靈活和高效的方式來查詢和操作數據。GraphQL作為一種查詢語言,允許用戶精確地指定他們想要的數據,而MongoDB作為一個靈活的NoSQL數據庫,可以很好地支持這種查詢。結合這兩者,我
Thumbnail
🚀 在Gin中整合GraphQL和MongoDB:靈活的數據查詢 隨著Web應用的複雜度增加,開發者尋找更靈活和高效的方式來查詢和操作數據。GraphQL作為一種查詢語言,允許用戶精確地指定他們想要的數據,而MongoDB作為一個靈活的NoSQL數據庫,可以很好地支持這種查詢。結合這兩者,我
Thumbnail
隨著Web應用的發展,前端和後端的需求也在變得越來越複雜。RESTful APIs已經不再滿足當前的需求,而GraphQL作為一個新興的數據查詢語言,提供了更靈活的查詢能力。在這篇文章中,我們將探討如何在Gin中實現GraphQL API,為你的應用帶來現代化的數據查詢。
Thumbnail
隨著Web應用的發展,前端和後端的需求也在變得越來越複雜。RESTful APIs已經不再滿足當前的需求,而GraphQL作為一個新興的數據查詢語言,提供了更靈活的查詢能力。在這篇文章中,我們將探討如何在Gin中實現GraphQL API,為你的應用帶來現代化的數據查詢。
Thumbnail
每次看到 REST 就讓我想起以前念研究所和老師一起想論文題目時,曾提過國外常會玩這種文字遊戲,像是將 Representational State Transfer 變成一個很簡單的單字 REST,但我的東西不管怎麼想,卻想不出什麼有趣的東西 Orz
Thumbnail
每次看到 REST 就讓我想起以前念研究所和老師一起想論文題目時,曾提過國外常會玩這種文字遊戲,像是將 Representational State Transfer 變成一個很簡單的單字 REST,但我的東西不管怎麼想,卻想不出什麼有趣的東西 Orz
Thumbnail
Hasura 是一個開源、高性能、多資料來源與嚴謹權限控管的 GraphQL Engine Service。
Thumbnail
Hasura 是一個開源、高性能、多資料來源與嚴謹權限控管的 GraphQL Engine Service。
Thumbnail
不論是 GraphQL 與 RESTful API 都需要生態系的支撐,才會好用與完整 這篇會先介紹 GraphQL 的生態系工具。
Thumbnail
不論是 GraphQL 與 RESTful API 都需要生態系的支撐,才會好用與完整 這篇會先介紹 GraphQL 的生態系工具。
Thumbnail
這裡會針 GraphQL 與 RESTful API 這兩者介面所需要做的事情來比較其應用的場景。
Thumbnail
這裡會針 GraphQL 與 RESTful API 這兩者介面所需要做的事情來比較其應用的場景。
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
Restful API 其實就是開放一個 EndPoit 的網路接口給其他人使用,並將要做的事情封裝在該接口內,不需要知道真實運作狀況,只要得到答案即可。
Thumbnail
Restful API 其實就是開放一個 EndPoit 的網路接口給其他人使用,並將要做的事情封裝在該接口內,不需要知道真實運作狀況,只要得到答案即可。
Thumbnail
網址是 API 的門面,大家使用 API 的第一步就是要看它。 第一眼就要讓人就知道這隻 API 在做什麼? 甚至因為遵循標準(目前 REST 是主流),可以類推 API 應該會有什麼功能等等。
Thumbnail
網址是 API 的門面,大家使用 API 的第一步就是要看它。 第一眼就要讓人就知道這隻 API 在做什麼? 甚至因為遵循標準(目前 REST 是主流),可以類推 API 應該會有什麼功能等等。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News