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

Question

我正在创建一个可以投票的投票应用程序。我目前坚持投票进行投票（本质上是创建投票）。

我的架构：

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

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
          ...
        }
      }
    }
  }
}

这个复杂的模式让我对如何定义我的胖查询感到困惑，因为它应该定义所有可能发生变化的东西。

以下是可以改变的：

1. 创建了一个投票（因此在胖查询中为 voteEdge）。
2. 投票被添加到 store 下的投票连接。
3. 投票将添加到查看器下的投票连接。
4. 在 store 下的 polls 连接中的某个 poll 下的 votes 连接中添加了一个投票。
5. （仅当查看者也是投票的创建者时才有可能）：在查看者下的投票连接中的某个投票下的投票连接中添加投票。

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

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

谢谢！

Answer 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
            }
          }
        }
      }
    `;
  }

希望这可以帮助！