如何使RelayJS理解GraphQL的响应是一组项目，而不仅仅是一个项目

问题描述

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

 类型卡{id:字符串！名称:字符串}输入查询{卡(名称:字符串！):卡卡(功率:字符串):[卡]} 

请注意，我在单个卡上也有一个查询，但在多个卡上也有查询.当我使用GraphIQl UI并进行类似查询{cards {name}}"的查询时，我按预期得到了一组纸牌.

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

  class MyApp扩展了React.Component {使成为() {返回 (< div>< h1>世界，您好！</h1>< CardList cards = {this.props.cards}/></div>);}}导出默认的Relay.createContainer(MyApp，{片段:{卡:()=>中继QL`卡上的片段{名称}`，卡:()=>中继QL`卡上的片段{$ {CardList.getFragment('cards')}}`}，}); 

并使用如下所示的Container设置CardList组件:

  Class CardList扩展了React.Component {使成为() {返回< div> {this.props.cards}</div>//UNEXPECTED-this.props.cards是第一张卡片，不是我用于.map over的数组}}导出默认的Relay.createContainer(CardList，{片段:{卡:()=>中继QL`卡上的片段{名称}`，}，}); 

有人有什么建议吗?这是我进入GraphQL和Relay的第二天，所以对于我所知的我可能犯了一个非常基本的错误.

解决方案

您可能希望在 cards 查询片段上使用 @relay(plural:true)指令.在操作中有一个复数字段的示例.

但是，如果您关心分页，则可能需要连接而不是复数字段.在中继文档中 中描述了连接，并在.

I have a GraphQL server running with a schema roughly like this:

type Card {
  id: String!
  name: String
}

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

Notice that I have a query on a single card, but also on multiple cards. When I use the GraphIQl UI and make a query like this "query {cards { name }}" I get back an array of cards, as expected.

However, I have a RelayContainer that is making the same query, but the props that come back are just the first result, rather than an array of results.

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

and the CardList component is set up with the Container like this:

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

Anybody have any suggestions? This is day 2 of me diving into GraphQL and Relay, so I might be making a very basic mistake for all I know.

解决方案

You probably want a @relay(plural: true) directive on your cards query fragment. There is an example of a plural field in action in the Star Wars example in the Relay repo.

If you care about pagination, though, you probably want a connection instead of a plural field. Connections are described in the Relay docs and implemented in graphql-relay-js.

这篇关于如何使RelayJS理解GraphQL的响应是一组项目，而不仅仅是一个项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！