React Relay：复杂的突变脂肪查询

Posted 2023-03-08

【中文标题】React Relay：复杂的突变脂肪查询

【英文标题】：React Relay: Complex mutation fat query

【发布时间】：2016-11-06 15:08:54

【问题描述】：

我正在创建一个投票应用程序，其中包含可以投票的投票。我目前正忙于投票（本质上是创建投票）。

我的架构：

（长话短说：民意调查可以从主商店访问，但观众的投票和投票可以由他直接访问（作为字段）。投票也可以从最小商店访问，但投票的投票也可以访问直接通过它。

query 
  store 
    polls  //poll connection
      edges 
        node  //poll
          votes  //vote connection
            ...
          
        
      
    
    votes  //vote connection
      edges 
        node  //vote
          ...
        
      
    
  
  viewer 
   polls  //poll connection
      edges 
        node  //poll
          votes  //vote connection
            ...
          
        
      
    
    votes  //vote connection
      edges 
        node  //vote
          ...
        
      
    
  

这个复杂的架构让我不知道应该如何定义我的胖查询，因为它应该定义所有可能发生变化的东西。

以下是可以改变的：

已创建投票（因此在 fat 查询中为 voteEdge）。 投票已添加到存储下的投票连接。 投票已添加到查看器下的投票连接。 在 store 下的 polls 连接中的某个 poll 下的 votes 连接中添加了一个投票。 （仅当查看者也是投票的创建者时才有可能）：在查看器下的投票连接中的某个投票下的投票连接中添加投票。

所以我的问题是我应该如何在我的胖查询中表达这一点，这样就足够了吗？

getFatQuery() 
    return Relay.QL`
      fragment on CreateVoteMutation 
        voteEdge,
        viewer
          polls,
          voteCount
          votes,
        ,
        store
          polls,
          voteCount,
          votes,
        
      
    `;
  

或者我应该以某种方式将投票包括在民意调查中？

getFatQuery() 
    return Relay.QL`
      fragment on CreateVoteMutation 
        voteEdge,
        viewer
          polls
            edges
              node
                voteCount,
                votes
              
            
          ,
          voteCount
          votes,
        ,
        store
          polls
            edges
              node
                voteCount,
                votes
              
            
          ,
          voteCount,
          votes,
        
      
    `;
  

谢谢！

【参考方案1】：

看来你的想法是对的。在 Relay 中定义 FatQuery 时，应尽可能保持返回字段最佳，因为这是 GraphQL 的好处（您不需要返回超过在客户端中使用的内容）。所以你的 FatQuery 应该是这样的：

getFatQuery() 
    return Relay.QL`
      fragment on CreateVoteMutation 
        voteEdge,
        viewer
          polls  // this is most likely a GraphQL object type, so you'll need a sub-selection, but you don't necessarily need to return all the Votes again since you do that later
            name
            timestamp
          
          voteCount // scalar integer
          votes  // again, here you'll need to return a sub-selection since Votes is a GraphQL object type
            name
            timestamp
          
        ,
        store
          polls  // this is most likely a GraphQL object type, so you'll need a sub-selection, but you don't necessarily need to return all the Votes again since you do that later
            name
            timestamp
          
          voteCount // scalar integer
          votes  // again, here you'll need to return a sub-selection since Votes is a GraphQL object type
            name
            timestamp
          
        
      
    `;
  

这个想法是，从技术上讲，您可以再次返回 votes 作为 polls 的子选择；但是，没有必要，因为您 return 已经在查看器下。这将为您提供系统中的总票数和所有票数。如果您想按投票过滤 Votes 和 VoteCount，那么您可以执行相反的操作，如下所示：

getFatQuery() 
    return Relay.QL`
      fragment on CreateVoteMutation 
        voteEdge,
        viewer
          polls  // this is most likely a GraphQL object type, so you'll need a sub-selection, but you don't necessarily need to return all the Votes again since you do that later
            name
            timestamp
            voteCount // scalar integer
            votes  // again, here you'll need to return a sub-selection since Votes is a GraphQL object type
                name
                timestamp
            
          
        ,
        store
          polls  // this is most likely a GraphQL object type, so you'll need a sub-selection, but you don't necessarily need to return all the Votes again since you do that later
            name
            timestamp
            voteCount // scalar integer
            votes  // again, here you'll need to return a sub-selection since Votes is a GraphQL object type
              name
              timestamp
            
          
        
      
    `;
  

希望这会有所帮助！

【讨论】：

再次感谢，我不明白的一件事：我认为中继胖查询中的重点是定义执行突变后可以更改的所有数据。那么您如何在答案中给出的选项之间进行选择，每个选项都只显示部分可能会改变的东西，我错过了什么吗？

是的，关键是为它提供它应该更改的所有数据的上下文，但仅在您需要时提供。您可以使用 Relay 的 getOptimisticResponse 提供一个压缩查询，该查询将从缓存存储中加载以提高性能，而 getFatQuery 是您最终希望为您的应用程序提供的整体查询。不必是整个类型和子字段。