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

Question

我的用例是我有一个 Node 应用程序，它使用来自 CMS 的数据，在该 CMS 中，我让用户能够 select 将 React 组件作为 "Layout"。我希望 Relay 能够从动态 select 组件中获取 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。我真的很想 Component.getFragment.

而不是 "PostList.getFragment"

Answer 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 中存在一个限制，要求内插表达式 return 要么：

片段参考

${Foo.getFragment('viewer')}
片段引用数组

${COMPONENTS.map(c => c.getFragment('viewer'))}
一个路由条件函数，return正好是一个片段引用

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

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

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

getFragment from a dynamic component in Relay

reactjs

relayjs

graphql