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

Posted

技术标签:

【中文标题】如何让 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)。 那么连接是启用特定于中继的分页的适当方式吗?就算不涉及实体关系,只是对账户的查询,哪里可能有几百万个账户?

以上是关于如何让 RelayJS 理解来自 GraphQL 的响应是一个项目数组,而不仅仅是一个项目的主要内容,如果未能解决你的问题,请参考以下文章

Relayjs Graphql 用户认证

relayjs 和 graphql 错误:错误:“节点”需要字段“id”

RelayJS:如何通过道具设置初始变量

如何让 Next JS 动态路由与 RelayJS 一起使用

如何以及何时为 graphql 生成 ID?

如何在graphql中返回post请求的响应