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

Posted 2023-03-08

【中文标题】GraphQL / Relay - 是不是需要在主 QueryRenderer 中查询所有表？

【英文标题】：GraphQL / Relay - do all tables need to be queried in main QueryRenderer?GraphQL / Relay - 是否需要在主 QueryRenderer 中查询所有表？

【发布时间】：2021-04-28 06:42:47

【问题描述】：

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

【参考方案1】：

您可以使用Fragment Container

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

【讨论】：

谢谢。是的，我实际上将它包装在 createFragmentContainer 中，但忘记添加它。 （添加到 OP）。我不断收到此错误：createFragmentSpecResolver: Expected prop emojisList` to be provided to Relay(ReactionBar), but got undefined.` 获取所有表情符号的 GraphiQL 查询是 allEmojis edges node scalars