Question

我的用例是我有一个Node应用程序，它使用来自CMS的数据，在那个CMS中，我让用户可以选择React Component作为“Layout”。我希望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。而不是“PostList.getFragment”，我真的希望能够做一个Component.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

来自Relay中动态组件的getFragment

1 个答案: