如何让 RelayJS 理解来自 GraphQL 的响应是一个项目数组，而不仅仅是一个项目

Posted 2023-03-08

【中文标题】如何让 RelayJS 理解来自 GraphQL 的响应是一个项目数组，而不仅仅是一个项目

【英文标题】：How to get RelayJS to understand that a response from GraphQL is an array of items, not just a single item

【发布时间】：2015-12-06 02:31:45

【问题描述】：

我有一个 GraphQL 服务器运行，其架构大致如下：

type Card 
  id: String!
  name: String


type Query 
  card(name: String!): Card
  cards(power: String): [Card]

请注意，我对一张卡片进行了查询，但也对多张卡片进行了查询。当我使用 GraphIQl UI 并进行类似“查询 cards name ”的查询时，我得到了一系列卡片，正如预期的那样。

但是，我有一个 RelayContainer 正在执行相同的查询，但返回的道具只是第一个结果，而不是结果数组。

class MyApp extends React.Component 
  render() 
    return (
      <div>
        <h1> Hello world!</h1>
        <CardList cards=this.props.cards />
      </div>
    );
  


export default Relay.createContainer(MyApp, 
  fragments: 
    card: () => Relay.QL`
      fragment on Card 
        name
      
    `,
    cards: () => Relay.QL`
      fragment on Card 
        $CardList.getFragment('cards')
      
    `
  ,
);

CardList 组件是这样设置容器的：

class CardList extends React.Component 
  render() 
    return <div>this.props.cards</div> // UNEXPECTED - this.props.cards is the first card, not an array for me to .map over
  


export default Relay.createContainer(CardList, 
  fragments: 
    cards: () => Relay.QL`
      fragment on Card 
        name
      
    `,
  ,
);

有人有什么建议吗？这是我深入研究 GraphQL 和 Relay 的第二天，所以据我所知，我可能犯了一个非常基本的错误。

【问题讨论】：

看看 TODO Relay 示例是如何工作的。您的 GraphQL 架构不适用于 Relay，因为您需要使用来自 github.com/graphql/graphql-relay-js github.com/facebook/relay/blob/… 的 connectionsDefinition

【参考方案1】：

您可能希望在您的 cards 查询片段上使用 @relay(plural: true) 指令。在 Relay repo 中有一个复数字段示例in the Star Wars example。

不过，如果您关心分页，您可能需要连接而不是复数字段。连接在in the Relay docs 中描述并在graphql-relay-js 中实现。

【讨论】：

谢谢，我开始沿着这条路探索。不过，我仍然没有完全理解的一件事是，这些示例都显示了从底部的单个对象开始的连接。例如。 Faction 有很多 Ships，Todo 有很多 Todo items，等等。但是，如果你想要一个复数形式的东西怎么办？ （例如 AllShips）

现在，您无法在根目录建立连接。这是一个已知的限制，但我们计划解决它，进度是being tracked here。目前，解决方法是将此类内容包装在另一个根字段中（例如，viewer）。

那么连接是启用特定于中继的分页的适当方式吗？就算不涉及实体关系，只是对账户的查询，哪里可能有几百万个账户？