Relay Modern如何不逐层传props在深层子组件访问预加载queryRef

Relay 原生设计层面没有提供跨任意组件层级直接消费上层创建的queryReference的内置API，官方示例中逐层传递的模式不是文档疏漏，是框架刻意设计的约束，目的是保证数据消费链路可追踪，支撑细粒度渲染、自动垃圾回收等核心特性。

你不需要把根级queryReference一直传到深层组件，遵循Relay的colocation（数据依赖和组件共存）设计原则，用fragment拆分就能完全避免透传根queryReference的问题：

• 仅在持有queryReference的最顶层加载组件调用一次usePreloadedQuery，拿到根查询的返回数据
• 顶层组件不需要把全量数据或者整个queryReference往下传，只需要把直接子组件依赖的数据片段对应的引用，作为props传给直接子组件
• 所有深层子组件（不管是孙级还是曾孙级）只需要声明自身依赖的数据fragment，通过useFragment读取父组件传下来的对应片段引用即可，完全不需要感知根查询、根queryReference的存在

代码示例：

// 根组件：持有预加载生成的queryReference，是唯一调用usePreloadedQuery的组件
const RootPageQuery = graphql`
  query RootPageQuery {
    currentUser {
      ...UserProfile_User
      ...OrderList_User
    }
    siteConfig {
      ...GlobalNav_Config
    }
  }
`
function RootPage() {
  const data = usePreloadedQuery(RootPageQuery, preloadedRootQueryRef)
  return (
    <main>
      <GlobalNav config={data.siteConfig} />
      <UserProfile user={data.currentUser} />
      <OrderList user={data.currentUser} />
    </main>
  )
}

任意深层组件（比如UserProfile下的UserAvatar，是根组件的曾孙级）不需要接触根queryReference，只需要声明自己的fragment依赖：

// 曾孙级组件UserAvatar
const UserAvatar_UserFragment = graphql`
  fragment UserAvatar_User on User {
    avatarUrl
    displayName
  }
`
function UserAvatar(props) {
  // 仅消费父组件传下来的对应片段引用，和根查询完全解耦
  const user = useFragment(UserAvatar_UserFragment, props.user)
  return <img src={user.avatarUrl} alt={user.displayName} />
}

如果你的预加载查询是服务于某一个深层子树，不需要在整个页面根节点做预加载：直接在该子树的最近公共父节点用useQueryLoader生成queryReference、调用usePreloadedQuery即可，从根源上减少props传递的层级。

• 用React Context全局透传queryReference：虽然能实现跨层读取，但会打破Relay对数据消费链路的追踪能力，会导致数据更新不及时、内存无法自动回收等问题，不符合框架设计预期
• 在深层组件直接使用useLazyLoadQuery：会触发请求瀑布流，完全丧失预加载带来的首屏性能收益，不推荐使用

你之前看到的“需要逐层传递fragmentRef”的方案，本质就是Relay原生标准写法，传递的只是当前组件需要的数据片段引用，不是整个根queryReference，传递链路非常短，不存在跨很多层级透传冗余参数的问题。

内容的提问来源于stack exchange，提问作者avocado