GraphQL / Relay - 是否需要在主 QueryRenderer 中查詢所有表？

Question

我是 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>

Answer 1

您可以使用片段容器

使用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
        }
      }
    }
  `,
});