2015-09-10 22 views
7

我有一个GraphQL服务器大致是这样的模式运行:如何获得RelayJS了解,从GraphQL的响应是项目的数组,而不仅仅是一个单一的项目

type Card { 
    id: String! 
    name: String 
} 

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

请注意,我有一个查询单张卡片,也可以在多张卡片上查询。当我使用GraphIQl用户界面并进行如下查询“query {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的第二天,所以我可能会犯一个非常基本的错误。

+0

看看TODO Relay示例如何工作。您的GraphQL模式对于Relay不正确,因为您需要使用https://github.com/graphql/graphql-relay-js中的“connectionsDefinition”https://github.com/facebook/relay/blob/a04a51486c2576c4a0dcdb091023e1bda0d0a5fe/examples /todo/data/schema.js#L93-L100 –

回答

10

您可能需要cards查询片段中的@relay(plural: true)指令。在Relay repo中有一个复数字段的例子in the Star Wars example

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

+0

谢谢,我正在开始探索这条路。有一件事我仍然没有充分注意,但是这些例子都显示了一个以基础上的单个对象开始的连接。例如。 Faction有很多船,Todo有很多Todo物品等等。但是,如果你想在根上有一个复数的东西呢? (例如AllShips) –

+3

现在,您不能在根上建立连接。这是一个已知的限制,但我们计划解决它,并且[正在此处追踪]进度(https://github.com/facebook/relay/issues/112)。目前,解决方法是将这些内容包装在另一个根域(例如,'viewer')中。 – wincent

+0

因此,连接是启用中继专用分页的适当方式吗?即使它不涉及实体关系,而只是一个关于账户的查询,哪里可能有数百万个账户? – Ryan

相关问题