一个React组件中有多个Relay片段?

时间:2017-11-23 16:05:11

标签: reactjs graphql relay relaymodern

这是docs的示例。问题是,如果我的TodoItem组件中还需要一些完全位于数据图中不同位置且无法通过Todo-> TodoItem链的其他数据,该怎么办呢。

class TodoItem extends React.Component {
  render() {
    const item = this.props.data;

  }
}
module.exports = createFragmentContainer(
  TodoItem,
  graphql`
    fragment TodoItem on Todo {
      text
      isComplete
    }
  `,
);

似乎Relay / GraphQL要求视图组成在与数据模型相同的层次结构中。组件是否有办法访问其他片段?我不知道,这样的事情:

module.exports = createFragmentContainer(
  TodoItem,
  graphql`
    fragment TodoItem on Todo {
      text
      isComplete
    }
  `,
  graphql`
    fragment FriendItem on Friends {
      name
    }
  `,
);

1 个答案:

答案 0 :(得分:2)

我不确定这是不是你想要的,(我也只是从接力开始),但你可以在createFragmentContainer中使用keys指定不同的片段功能:

Fragmentcontainer:

export default createFragmentContainer(TodoItem, {
  todo: graphql`
    fragment TodoItem_todo on Todo {
      text
      isComplete
    }
  `,
  friend: graphql`
    fragment FriendItem_friend on Friends {
      name
    }
  `,
});

然后在queryRenderer这样的事情中:

query={graphql`
    query AppQuery {
        todos {
            ...TodoItem_todo
        }
        friends {
            ...FriendItem_friend
        }
    }
`}