用途:面向使用 React 与 GraphQL 的开发者,讲解 Relay 的 Fragment 组合模式,帮助把数据依赖与组件就近放置(colocation),实现数据屏蔽与更可维护的组件结构。
主要能力:基本片段定义(useFragment);片段组合与嵌套展开;片段参数(@argumentDefinitions 与 @include/@skip 指令);数据屏蔽;连接型片段与分页(@connection、usePaginationFragment);可重取片段(@refetchable、useRefetchableFragment);复数片段(@relay(plural: true));条件片段与联合类型;遗留 createFragmentContainer 与新版 Hook 对比;递归片段、内联片段、@required 字段等高级用法,以及最佳实践与常见陷阱。
使用方式:先安装依赖,命令为 npm install react-relay relay-runtime、npm install --save-dev relay-compiler babel-plugin-relay、npm install graphql;再配置 relay.config.js(src、schema、language、artifactDirectory 等),在 package.json 添加 "relay": "relay-compiler" 与 "relay:watch": "relay-compiler --watch";创建 Environment(Network.create 与 Store/RecordSource),然后在组件中用 graphql 模板与 useFragment 等 Hook 读取数据。
适用场景:以 GraphQL 驱动的 React 应用、组件驱动架构、可复用 UI 组件、社交、电商、协作工具、内容管理系统、管理后台及 React Native 应用。
限制:资料未提供具体收费、性能数据或平台差异说明;部分示例涉及服务端地址、鉴权与版本兼容细节需按项目实际配置,缺失事实暂未提供。