reactjs - 从 Relay 中的动态组件获取Fragment

Question

我的用例是，我有一个 Node 应用程序，它使用来自 CMS 的数据，并且在该 CMS 中，我让用户能够选择 React 组件作为“布局”。我希望 Relay 能够从该动态选择组件中获取 GraphQL 片段。当布局的父组件安装时，它会执行查询并获取所需的布局组件并设置 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。我真的希望能够执行 Component.getFragment，而不是“PostList.getFragment”。

Answer 1

这里您必须做的是将所有可能的片段引用插入到查询中。从 Relay v0.7.1 开始，您将能够在查询中插入片段引用的数组:

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')}

原始发布者的用例是一个路由条件函数，该函数返回片段引用的数组，但尚不支持。请参阅评论以获取更多信息。另请参阅facebook/relay/issues/896