GraphQL 是一種現(xiàn)代 API 查詢語言，廣泛應(yīng)用於現(xiàn)代 Web 應(yīng)用程式中，因?yàn)樗峁┝艘环N高效、靈活且強(qiáng)大的獲取資料的方式

GraphQL 基本快速應(yīng)用範(fàn)例：

1.後端設(shè)定（使用graphql-yoga）

首先，我們需要建立一個 GraphQL 伺服器。安裝 graphql-yoga 並建立一個簡單的 GraphQL 模式：

2.前端設(shè)定（使用Apollo Client）

接下來，我們需要在前端應(yīng)用程式中設(shè)定 Apollo Client 來與我們的 GraphQL 伺服器通訊：

3.編寫前端元件

現(xiàn)在，我們在React元件中使用Apollo Client來執(zhí)行查詢和突變：

我們建立一個 GET_HELLO 查詢來取得伺服器的問候語並將其顯示在頁面上。同時，我們定義了一個ADD_MESSAGE_MUTATION突變操作，當(dāng)使用者點(diǎn)擊按鈕時，它會向伺服器發(fā)送新訊息。

4. 運(yùn)行應(yīng)用程式

啟動後端伺服器：

然後啟動前端應(yīng)用程序，假設(shè)創(chuàng)建React App：

GraphQL 基本查詢

1. 查詢語言：查詢、變異、訂閱

在 GraphQL 中，查詢和突變是由類似 JSON 的結(jié)構(gòu)所表示的字串。這是一個簡單的例子：

在上面的程式碼中，GetUser 查詢請求使用者 ID 為 1 的使用者的姓名和電子郵件。 CreateUser 突變建立一個新使用者並傳回新使用者的 ID 和名稱。 OnNewUser 訂閱等待新使用者建立並傳回新使用者的資訊。

2. 類型系統(tǒng)

在後端，我們定義了一個 GraphQL 模式來描述這些類型：

這裡我們定義了一個 User 物件類型，一個用於變異操作的 Mutation 類型，以及一個用於訂閱操作的 Subscription 類型。

3. 查詢結(jié)構(gòu)：字段和參數(shù)

查詢結(jié)構(gòu)由欄位和參數(shù)組成。在上面的查詢範(fàn)例中，user 是字段，id 和 email 是 user 字段的子字段。 id:1等參數(shù)用於自訂查詢。

4. 層次結(jié)構(gòu)和嵌套

GraphQL 查詢可以巢狀。這是一個更複雜的例子：

此查詢請求所有用戶及其各自的帖子，其中還包括有關(guān)作者的資訊。層次結(jié)構(gòu)允許在一個請求中檢索多個層級的資料。

客戶端程式碼範(fàn)例（使用 Apollo 客戶端）

在此 React 元件中，我們使用 useQuery 從 GraphQL 伺服器取得資料並呈現(xiàn)有關(guān)使用者及其貼文的資訊。這就是 GraphQL 查詢、型別系統(tǒng)和層次結(jié)構(gòu)發(fā)揮作用的方式。

GraphQL 架構(gòu)

GraphQL 模式定義語言（SDL）是一種用來描述 GraphQL 模式的語言。它以簡潔、人類可讀的格式定義資料類型、查詢、突變和指令。

定義型別
首先，讓我們定義一些基本資料類型。例如，定義一個 User 類型和一個 Post 類型。

這裡，使用者類型有 id、使用者名稱、電子郵件欄位和連結(jié)到多個貼文的貼文欄位。 Post 類型包含 id、標(biāo)題、內(nèi)容欄位和指向使用者的作者欄位。

查詢根和變異根
接下來，定義 GraphQL 查詢根（Query）和變異根（Mutation）類型，它們是客戶端請求資料和修改資料的入口點(diǎn)。

在查詢類型中，我們定義了取得單一使用者、所有使用者、單一貼文和所有貼文的查詢。在 Mutation 類型中，我們定義了建立新使用者和新貼文的操作。

理解並使用指令
指令是 GraphQL 模式中更改執(zhí)行行為的指令。它們可以應(yīng)用於類型系統(tǒng)定義的任何部分，例如欄位、輸入類型、物件類型等。下面示範(fàn)如何使用自訂 @auth 指令來控制存取權(quán)限。

首先，假設(shè)我們定義一個 @auth 指令來限制對某些欄位的存取並要求使用者登入。

接下來，在架構(gòu)中套用此指令：

在上面的範(fàn)例中，me查詢和使用者名字段無需特殊權(quán)限即可訪問，但訪問使用者的電子郵件欄位需要管理員權(quán)限（由@auth(requires: ADMIN)指令指定）。

GraphQL 進(jìn)階應(yīng)用

1. 分頁

使用 GraphQL 基於遊標(biāo)的分頁來提高效能和使用者體驗(yàn)。

架構(gòu)定義：

解析器範(fàn)例：

2. 錯誤處理

自訂錯誤處理，提升客戶端處理錯誤的能力。

解析器範(fàn)例：

3. 自訂指令

建立自訂指令來實(shí)現(xiàn)特定的業(yè)務(wù)邏輯或安全要求。

架構(gòu)定義：

解析器範(fàn)例：

確保在您的 GraphQL 伺服器設(shè)定中註冊此指令處理程序。

4.GraphQL聯(lián)邦

Federation 允許建立由多個服務(wù)組成的單一 GraphQL API。

服務(wù)架構(gòu)：

服務(wù) B 架構(gòu)：

5.複雜查詢最佳化

使用 GraphQL 的欄位解析器和資料載入器來最佳化效能。

資料載入器範(fàn)例：

GraphQL 的特性與優(yōu)勢

• 效能最佳化：透過按需取得數(shù)據(jù)，降低網(wǎng)路傳輸開銷，提高頁面載入速度。
• 減少錯誤：客戶端定義查詢結(jié)構(gòu)，伺服器傳回預(yù)期形狀，減少介面不符導(dǎo)致的錯誤。
• 更好的API設(shè)計(jì)：強(qiáng)型別系統(tǒng)保證了資料的一致性與正確性，讓API更容易理解與維護(hù)。
• 客戶端控制：客戶端可以決定獲取多少資料以及何時獲取，提高了使用者體驗(yàn)。
• 快取最佳化：客戶端可以根據(jù)傳回的資料結(jié)構(gòu)更輕鬆地實(shí)現(xiàn)快取策略。
• 降低後端複雜度：後端不再需要建立多個API端點(diǎn)來滿足不同客戶端的需求。

以上是GraphQL 在現(xiàn)代 Web 應(yīng)用程式中的應(yīng)用與優(yōu)勢的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！