无需Query的Relay Fragment hydration：如何让useFragment支持本地临时数据

下面是经过实践验证的3种实现思路，按推荐优先级排序：

• 方案1：封装兼容临时对象的自定义Hook（最推荐）
  自定义一层包裹原生useFragment的通用Hook，内部先识别临时对象的标识，匹配时直接返回你构造的合规数据，否则走原生Relay逻辑。这种方案对业务代码侵入极低，使用体验和原生useFragment完全一致。
  参考实现：

  import { useFragment as useRelayFragment } from 'react-relay';
  
  // 你可以根据自己的临时对象规则调整判断逻辑，比如给临时对象加专属标识字段
  const isTemporaryRelayObject = (obj) => obj?._isTemp === true;
  
  export function useFragment(fragment, fragmentRef) {
    if (isTemporaryRelayObject(fragmentRef)) {
      // 要求临时对象的字段结构100%匹配fragment定义，避免渲染报错
      return fragmentRef;
    }
    return useRelayFragment(fragment, fragmentRef);
  }
  

  业务组件只需把react-relay的useFragment导入换成这个自定义Hook即可，无需修改其他业务逻辑。

• 方案2：使用Relay原生乐观更新机制（最合规）
  如果你的临时对象是操作后的乐观预期数据，直接走Relay mutation的optimisticResponse配置即可。Relay会自动将乐观数据写入本地store，后续所有useFragment都能正常读取到符合结构的对象，完全不需要你自己处理临时对象的向下传递，也不需要修改组件逻辑，符合Relay的设计规范。

• 方案3：无mask fragment加类型断言（适配老代码）
  如果不想调整现有代码结构，可以继续使用@relay(mask: false)定义fragment，拿到上层传入的混合数据后，直接断言为fragment对应的TypeScript类型即可使用，实现成本最低，适合小范围临时场景。

通用注意事项：所有方案都要求你构造的临时对象字段结构、类型和fragment定义完全匹配，避免组件渲染时出现字段不存在的运行时错误。替换临时对象为真实Relay对象时，要保证引用变化正常触发组件重渲染。

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