javascript - 由于 id 冲突，Relay QueryRendererfragmentContainer 传递的 props 与服务器响应不同

Question

我遇到了这个奇怪的问题，基本上是:

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

我不确定中继在从自己的存储中查找数据时正在做什么，但我怀疑这是因为类型中缺少 id 声明，以下是代码示例:

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} />
  }}
/>

记分板.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 = [
  {
    "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，但事实并非如此。

此问题是否是由于响应为数组的 Match 类型中没有 id 导致的？ 这就是为什么中继要寻找具有相同 id 的Team？

Answer 1

发生这种情况是因为 Relay 每次都会更新 ID 330(即 SGT)的 Team 类型，并使用最新值；列表中的最后一项是 42。

您可以从团队中删除分数字段(这似乎有点奇怪，团队没有一个分数；她在一场比赛中得分)，并在 Match 类型上创建 2 个字段:awayTeamScore 和 homeTeamScore。