GraphQL 在現代 Web 應用程式中的應用與優勢

GraphQL 是一種現代 API 查詢語言，廣泛應用於現代 Web 應用程式中，因為它提供了一種高效、靈活且強大的獲取資料的方式

GraphQL 基本快速應用範例：

1.後端設定（使用graphql-yoga）

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

2.前端設定（使用Apollo Client）

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

3.編寫前端元件

現在，我們在React元件中使用Apollo Client來執行查詢和突變：

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

4. 運行應用程式

啟動後端伺服器：

然後啟動前端應用程序，假設創建React App：

GraphQL 基本查詢

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

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

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

2. 類型系統

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

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

3. 查詢結構：字段和參數

查詢結構由欄位和參數組成。在上面的查詢範例中，user 是字段，id 和 email 是 user 字段的子字段。 id:1等參數用於自訂查詢。

4. 層次結構和嵌套

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

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

客戶端程式碼範例（使用 Apollo 客戶端）

在此 React 元件中，我們使用 useQuery 從 GraphQL 伺服器取得資料並呈現有關使用者及其貼文的資訊。這就是 GraphQL 查詢、型別系統和層次結構發揮作用的方式。

GraphQL 架構

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

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

這裡，使用者類型有 id、使用者名稱、電子郵件欄位和連結到多個貼文的貼文欄位。 Post 類型包含 id、標題、內容欄位和指向使用者的作者欄位。

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

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

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

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

接下來，在架構中套用此指令：

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

GraphQL 進階應用

1. 分頁

使用 GraphQL 基於遊標的分頁來提高效能和使用者體驗。

架構定義：

解析器範例：

2. 錯誤處理

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

解析器範例：

3. 自訂指令

建立自訂指令來實現特定的業務邏輯或安全要求。

架構定義：

解析器範例：

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

4.GraphQL聯邦

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

服務架構：

服務 B 架構：

5.複雜查詢最佳化

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

資料載入器範例：

GraphQL 的特性與優勢

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

以上是GraphQL 在現代 Web 應用程式中的應用與優勢的詳細內容。更多資訊請關注PHP中文網其他相關文章！