7

おおよそ次のようなスキーマで実行されているGraphQLサーバーがあります。

type Card {
  id: String!
  name: String
}

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

1 つのカードだけでなく、複数のカードにもクエリがあることに注意してください。GraphIQl UI を使用して、「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 に飛び込んで 2 日目なので、私が知っている限りでは非常に基本的な間違いを犯している可能性があります。

4

1 に答える 1