Experiencing a curious problem:
- Initiating a graphql request from
QueryRenderer - Obtaining response data from server (verified through Network tab in dev tools)
Propsbeing populated in theQueryRendererrender({ error, props })function- The
propsare passed down to child component usingcreateFragmentContainer, which renders the value - The displayed value for one field is different compared to the response
I'm uncertain about relay's behavior when retrieving data from its own store. I suspect it may be due to the absence of an id declaration in a type. Here are code examples:
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
}
}
`,
})
Sample response for matches from server:
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"
}
},
]
Rendered values:
(
<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>
)
Therefore, all occurrences of STG are replaced with 42, which should not happen.
Could this issue arise because there is no id in the Match type that results in an array response? Is Relay searching for a Team with the same id?