GraphQL / Relay - 是否需要在主 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>

解决方法

您可以使用Fragment Container

用 textarea{ width: 400px; height: 400px; resize:none; } HOC 包裹 <EmojiList /> 组件，然后它将获取您需要的所有数据，这些数据是您从 createFragmentContainer 获取的根目录。

数据可以作为组件内部的 props 访问

QueryRenderer