从 Relay 中的动态组件获取片段

Posted 2023-03-08

【中文标题】从 Relay 中的动态组件获取片段

【英文标题】：getFragment from a dynamic component in Relay

【发布时间】：2016-05-06 04:40:01

【问题描述】：

我的用例是我有一个使用来自 CMS 的数据的 Node 应用程序，并且在该 CMS 中，我让用户能够选择一个 React 组件作为“布局”。我希望 Relay 能够从该动态选择组件中获取 GraphQL 片段。当 Layout 的父组件挂载时，它会通过查询并获取它需要的布局组件并设置一个 Relay 变量 - 然后它需要从该组件获取一个片段。有没有办法做到这一点？

这里是父级查询：

export default Relay.createContainer(WordpressPage, 

initialVariables:
    Component: null,
    page: null,
    showPosts: false,
    limit: 5
,

prepareVariables(prevVars)
    return
        ...prevVars,
        showPosts: true
    
,

fragments: 
  viewer: (Component, showPosts, limit) => Relay.QL`
    fragment on User 
      $PostList.getFragment("viewer", limit:limit).if(showPosts),
        page(post_name:$page)
          id,
          post_title,
          post_type,
          post_content,
          thumbnail,
          layout
           meta_value
          
        
      
    `,
  ,
);

如您所见，它查询并获取一个布局字段。当它挂载时，它将 Relay Component 变量设置为 React Component。而不是“PostList.getFragment”，我真的很想能够做一个 Component.getFragment。

【参考方案1】：

您必须在此处将所有可能的片段引用插入到查询中。从 Relay v0.7.1 开始，您将能够在查询中插入片段引用的 array：

const COMPONENTS = [
  [PostList, 'showPosts'],
  [OtherKindOfList, 'showOthers'],
  /* ... */
];

static initialVariables = 
  showPosts: false,
  showOthers: false,
  /* ... */
;

fragments: 
  viewer: variables => Relay.QL`
    fragment on User 
      $COMPONENTS.map(([Component, variableName]) => 
        const condition = variables[variableName];
        return Component
          .getFragment('viewer', limit: variables.limit)
          .if(condition);
      ),
      # ...
    `,
  ,
);

警告：目前 Relay 存在一个限制，要求内插表达式返回：

片段参考

$Foo.getFragment('viewer')

片段引用数组

$COMPONENTS.map(c => c.getFragment('viewer'))

一个完全返回一个片段引用的路由条件函数

$(route) => COMPONENTS[route].getFragment('viewer')

原始海报的用例是一个路由条件函数，它返回一个片段引用的数组，目前尚不支持。有关详细信息，请参阅 cmets。另见facebook/relay/issues/896

【讨论】：

谢谢！知道什么时候会发布 0.7.1 吗？

我刚刚发布了v0.7.1，只为你。 :)

该条件是否仅适用于布尔变量？我无法设置“布局”变量并检查它是否等于字符串？

我不这么认为，因为这里的condition 表示“变量”数据类型，实际上并不是原始布尔值。这让 Relay 可以随着时间的推移评估变量，以查看 if() 条件是通过还是失败。

这里是page这里是PostList