認識 GraphQL
前段時間,GraphQL 出現並掀起了一陣熱潮。但是 GraphQL 跟 REST 是兩種不同的東西,所以也需要一定的學習成本,導致大部分人都沒有選擇去學習它,今天就帶大家簡單過一遍 GraphQL 吧,希望大家能有所收穫。
知識擴展:GraphQL 和 REST 對比
GraphQL 好在哪?
首先來説説 GraphQL 到底好在哪:
- GraphQL 速度快並且穩定
- GraphQL 可以獲取更多的資源
- GraphQL 是單端點查詢
- GraphQL 的可持續性非常出色
- GraphQL 具有向下兼容的特性
GraphQL 使用場景
GraphQL 的按需查詢非常實用,試想一下,你們在開發一個非常大型的網站的時候,一個首頁就得請求很多個接口了,比如:
- 輪播圖接口
- Tag 接口
- List 接口
在上面的例子裏,一個首頁就得請求三個以上的接口了,瀏覽器併發數太多的話,會大大影響用户的使用體驗。
那如果使用 GraphQL 去查詢呢,就只需要一個接口就完事了,也就是一個請求就可以查詢很多個請求所需要的數據,那自然減少了併發數。
GraphQL 教程
GraphQL 其實不難,無非就是傳個不同的 query語句 到後端,接收不同的 JSON 罷了。
query 查詢
比如我現在要設計一個學生管理平台,我想查詢學生列表,我應該傳什麼參數呢?
分析一下上面的語句:
- query:操作類型
- getStudents:操作函數名
- students:是後端定義好的接口
- id,name,age:指的是我們需要查詢的字段
這樣查詢,返回的數據為:
觀察上面的數據,使我們想要的數據,並且只返回我們需要查詢的字段。
傳參查詢
我們剛剛説了 getStudents 是 函數名,那既然是函數,肯定是可以傳參的,比如,我們只需要查詢 id 為 1 的學生,我們可以這麼傳:
query
variables
這樣就能查到我們想要的數據了。
mutation 修改
前面講的是 query 語句,我們試一下 mutation 語句,他可以對數據進行修改、新增。
比如我們想要新增一個學生,我們可以這麼寫:
調試 GraphQL 接口步驟
我們寫完 GraphQL 接口之後,我們需要使用 API 工具對 GraphQL 接口進行調試。
新建 GraphQL 請求
我們需要先在 Apifox 裏新建一個 GraphQL 請求,使用它去發起請求,並調試。
然後點擊 保存 按鈕,完成創建。
查詢
我們先查出所有的學生,我們需要跳到 運行 頁面,並選擇對應的 Body 類型,填寫 query 語句,然後點擊 發送 按鈕,得到查詢結果,符合我們的預期。
帶參查詢
接着我們可以進行 帶參查詢,需要同時配置:
- query
- variables
知識擴展:
瞭解更多關於 GraphQL 知識。
- GraphQL 有什麼優點和缺點
- API 開發:gRPC vs GraphQL - 如何選擇更適合你的開發方案