来自Relay中动态组件的getFragment

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