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

Question

这是来自 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
    }
  `,
);

Answer 1

我不确定这是否是你想要的，（我也刚开始使用中继）但你可以在 createFragmentContainer 函数中使用 keys 指定不同的片段：

片段容器：

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
        }
    }
`}

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

Multiple Relay fragments in one React component?

reactjs

graphql

relay

relaymodern