[英]GraphQL / Relay - do all tables need to be queried in main QueryRenderer?
我是 GraphQL 和 Relay 的新手,我正在努力处理查询、片段、...传播和传递道具。 我认为我不必要地通过许多组件传递道具。 我想学习如何将我的数据对象从 QueryRenderer 传送到深度嵌套的组件,跳过所有祖先组件。
假设我有这样的组件结构。 我需要来自应用程序深处的EmojisList
组件内的“表情符号”表中的表情符号列表。 我不确定在哪里传播或传递道具,或者何时询问实际的标量。
<MainApp>
<QueryRenderer
environment={environment}
query={graphql`
query MainAppQuery {
currentPerson { // current user
...Timeline_currentPerson
}
allEmojis {
...ReactionBar_emojisList
}
}
`}
/>
<Timeline currentPerson={props.currentPerson}>
<PostList>
<Post>
<ReactionBar>
<EmojisList>
// I need this list
export default createFragmentContainer(ReactionBar, {
emojisList: graphql`
fragment ReactionBar_emojisList on EmojisConnection @relay(plural: true) {
edges {
node {
name
rowId
}
}
}
`,
});
</EmojisList>
</ReactionBar>
</Post>
</PostList>
</Timeline>
</MainApp>
您可以使用片段容器
使用createFragmentContainer
HOC 包装<EmojiList />
组件,然后它将获取您从QueryRenderer
获取的所有您需要的数据。
数据将作为组件内的道具访问
// EmojisList.js
import {createFragmentContainer, graphql} from 'react-relay';
class EmojisList extends React.Component {/* code */}
// Export a *new* React component that wraps the original `<EmojisList>`.
export default createFragmentContainer(EmojisList, {
emojisList: graphql`
fragment EmojisList_emojisList on EmojisConnection {
edges {
node {
name
rowId
}
}
}
`,
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.