Relay 解析器簡介

Relay 解析器是一個 實驗性 的 Relay 功能，可讓您使用僅在客戶端已知的值來擴增 Relay 的 GraphQL 圖表。這讓您可以使用建模伺服器狀態的方式來架構客戶端狀態，並使用 Relay 熟悉的資料抓取 API 來存取該狀態。客戶端狀態可以包括來自客戶端資料儲存區的資料，以及從圖表中的其他值計算得出的衍生資料。

透過在圖表中建模衍生和客戶端狀態，Relay 可以為產品開發人員提供統一的資料存取 API。產品工程師想要存取的所有全域相關資料，都可以從相同的結構化 GraphQL 結構描述中發現並有效率地取得。此外，解析器還提供許多執行時的優點

• 具有垃圾回收的全域記憶化
• 有效率的解析器反應式重新計算
• 資料變更時的有效率 UI 更新

您可以將解析器視為在您的客戶端程式碼中定義並縫合到您伺服器結構描述的其他結構描述類型和欄位。就像您定義建模伺服器上欄位的解析器方法/函式一樣，Relay 解析器是使用解析器函式來定義的。

Relay 解析器的使用案例

Relay 解析器適用於建模許多不同種類的資料。以下是一些可以使用 Relay 解析器架構並提供給產品程式碼的資料類型範例

• 使用者建立的資料 - 您可以建模複雜的表單狀態或其他應該在特定元件樹狀結構中持續存在的資料
• 客戶端資料庫 - 持久性資料儲存區，例如 IndexDB、localStorage 或 SQLite
• 第三方 API - 直接由客戶端從第三方 API 抓取的資料，例如來自第三方搜尋提供者的搜尋結果
• 加密資料 - 在伺服器上不透明的端對端加密資料，因此無法在伺服器結構描述中建模
• 舊版資料儲存區 - 在採用 Relay 和 GraphQL 期間，可以將來自預先存在的資料層（例如 Redux）的資料公開在圖表中，以確保您應用程式的已遷移和未遷移部分始終保持同步

定義解析器

危險

由於解析器仍然是 實驗性功能，因此在您開始在 Relay 中使用解析器之前，您需要先啟用它們。請參閱啟用 Relay 解析器以取得說明。

解析器是使用匯出的函式來定義，這些函式會使用特殊的 @RelayResolver docblock 進行註釋。這些 docblock 對於 Relay 編譯器是可見的，並讓編譯器能夠建構您的客戶端結構描述，並在 Relay 產生的成品中自動匯入您的函式。解析器函式可以定義在 Relay 專案中的任何檔案中，不過您可能會想要定義它們在程式碼庫中的位置的一些慣例。

最簡單的解析器會擴增現有的類型，而且沒有任何輸入

/**
 * @RelayResolver Query.greeting: String
 */
export function greeting(): string {
  return "Hello World";
}

取用解析器與取用伺服器欄位是相同的。產品程式碼不需要知道它正在讀取的欄位類型。

import {useLazyLoadQuery, graphql} from 'react-relay';
import {useClientQuery, graphql} from 'react-relay';

function Greeting() {
  const data = useClientQuery(graphql`
    query GreetingQuery {
      greeting
    }`, {});
  return <p>{data.greeting}</p>;
}

注意

如果您的查詢僅包含客戶端定義的欄位，您將需要使用不同的查詢 API 來抓取資料。請注意此範例如何使用 useClientQuery，而不是 useLazyLoadQuery 或 usePreloadedQuery。如果您的查詢也包含伺服器資料，您可以使用標準的 useLazyLoadQuery 或 usePreloadedQuery API。

我們打算在未來版本的 Relay 中移除此要求。