Relay QueryRenderer fragmentContainer传递不同于服务器响应的props,因为id冲突

时间:2017-09-08 08:33:31

标签: javascript graphql relayjs relay relaymodern

我有这个奇怪的问题,基本上是:

  1. QueryRenderer
  2. 发出的graphql请求
  3. 从服务器返回的响应包含数据(从开发工具的“网络”选项卡中检查)
  4. props填充在QueryRenderer render({ error, props })函数
  5. props传递给带有createFragmentContainer的子组件,该组件呈现值
  6. 一个字段的呈现值与响应
  7. 不同

    当我从自己的商店查找数据时,我不确定继电器在做什么,但我怀疑这是因为类型中缺少id声明,这里是代码示例:< / p>

    App.js

    <QueryRenderer
      environment={env}
      query={graphql`
        query ScoreboardContainerQuery($ID: ID!) {
          scoreboard(id: $ID) {
            ...Scoreboard_scoreboard
          }
        }
      `}
      variables={{ID: gameID}}
    
      render={({ error, props }) => {
        return <Scoreboard scoreboard={props ? props.scoreboard : undefined} />
      }}
    />
    

    Scoreboard.js

    const Scoreboard = ({ scoreboard }) => (
      <main>
        {scoreboard.matches.map(match => <Match key={match.id} match={match} />)}
      </main>
    )
    
    export default createFragmentContainer(Scoreboard, {
      scoreboard: graphql`
      fragment Scoreboard_scoreboard on FootballScoreboard {
        matches {
          ...Match_match
        }
      }
      `,
    })
    

    Match.js

    const Match = ({ match }) => (
      <div>
        <div>
          {match.homeTeam.displayName}-
          {match.homeTeam.score}
        </div>
        <div>
          {match.awayTeam.displayName}-
          {match.awayTeam.score}
        </div>
      </div>
    )
    
    export default createFragmentContainer(Match, {
      match: graphql`
        fragment Match_match on Match {
          date
          homeTeam { // this is a Team type
            id
            displayName
            score
          }
          awayTeam { // this is a Team type
            id
            displayName
            score
          }
        }
      `,
    })
    

    来自服务器的matches的示例响应:

    matches = [
      {
        "date": "2017-09-03T06:00:00Z",
        "homeTeam": {
          "id": "330",
          "displayName": "STG",
          "score": "20"
        },
        "awayTeam": {
          "id": "332",
          "displayName": "CBY",
          "score": "0"
        }
      },
      {
        "date": "2017-08-27T06:00:00Z",
        "homeTeam": {
          "id": "329",
          "displayName": "PEN",
          "score": "14"
        },
        "awayTeam": {
          "id": "330",
          "displayName": "STG",
          "score": "0"
        }
      },
      {
        "date": "2017-08-12T05:00:00Z",
        "homeTeam": {
          "id": "330",
          "displayName": "STG",
          "score": "42"
        },
        "awayTeam": {
          "id": "337",
          "displayName": "GCT",
          "score": "0"
        }
      },
    ]
    

    渲染值:

    (
      <main>
        <div>
          <div>STG-42</div>
          <div>CBY-6</div>
        </div>
        <div>
          <div>PEN-0</div>
          <div>STG-42</div>
        </div>
        <div>
          <div>STG-42</div>
          <div>GCT-18</div>
        </div>
      </main>
    )
    

    因此,所有STG值都被覆盖为42,并且它不应该被覆盖。

    是否导致此问题是因为id类型中没有Match响应是数组? 那就是为什么中继正在寻找具有相同身份的Team

1 个答案:

答案 0 :(得分:1)

这种情况正在发生,因为Relay更新Team类型的id 330(即SGT),每次都有最新的值;列表的最后一个是42。

您可以从score中移除Team字段(这看起来有点奇怪,一个团队没有一个分数;它在一场比赛中她有分数),并在Match类型上创建2个字段:awayTeamScorehomeTeamScore