Relay 解析器简介
Relay 解析器是 Relay 的一项 **实验性** 功能，它允许您使用仅在客户端上已知的值来扩展 Relay 的 GraphQL 图。这使您能够像对服务器状态建模一样对客户端状态进行模式化，并使用 Relay 熟悉的 data-fetching API 来访问该状态。客户端状态可以包括来自客户端数据存储的数据以及从图中其他值计算出的派生数据。
通过在图中对派生和客户端状态建模，Relay 可以为产品开发人员提供统一的数据访问 API。产品工程师想要访问的所有全局相关数据都可以从同一个结构化的 GraphQL 模式中发现和高效地获取。此外，解析器还提供许多运行时优势
- 带垃圾回收的全局记忆
- 高效的解析器反应式重新计算
- 数据更改时高效的 UI 更新
您可以将解析器视为在您的客户端代码中定义并在服务器模式中缝合的额外模式类型和字段。就像您在服务器上定义解析器方法/函数来对您的字段建模一样，Relay 解析器使用解析器函数定义。
Relay 解析器的用例
Relay 解析器对于对多种不同类型的数据建模很有用。以下是一些可以使用 Relay 解析器进行模式化并提供给产品代码的示例数据类型
- 用户创建的数据 - 您可以对复杂的表单状态或应该超出特定组件树寿命的其他数据进行建模
- 客户端数据库 - 持久性数据存储，如 IndexDB、localStorage 或 SQLite
- 第三方 API - 直接由客户端从第三方 API 获取的数据，例如来自第三方搜索提供程序的搜索结果
- 加密数据 - 在服务器上不透明的端到端加密数据，因此无法在服务器模式中对其进行建模
- 遗留数据存储 - 在采用 Relay 和 GraphQL 期间，可以从预先存在的层（如 Redux）公开数据到图中，以确保您应用程序的迁移部分和未迁移部分始终保持同步
定义解析器
由于解析器仍处于 **实验阶段**，因此在您开始在 Relay 中使用解析器之前，需要先启用它们。有关说明，请参阅 启用 Relay 解析器。
解析器使用带有特殊 @RelayResolver 文档块 的导出函数定义。这些文档块对 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 的未来版本中消除此要求。