如何让 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 错误:错误:“节点”需要字段“id”