I am calling an API to fetch details about several hockey games. I am storing the results in a ref
called games
.
const games = ref<Game[]>([])
const todaysGameSummaries = await NHL.getTodaysGameSummaries()
const gamePromises = todaysGameSummaries.map(async (gameSummary) => await getCompleteGameData(gameSummary.id))
games.value = await Promise.all(gamePromises)
const firstGameFirstPlayer = games.value[0].playerSummaries[0]
console.log("Immediate:", firstGameFirstPlayer)
setTimeout(() => console.log("After: ", firstGameFirstPlayer), 1)
//Output
//Immediate: Proxy(Object) {id: 8471218, teamId: 3, firstName: 'Blake', lastName: 'Wheeler', number: 17, …}
//After: Proxy(Object) {id: 8480012, teamId: 3, firstName: 'Blake', lastName: 'Wheeler', number: 17, …}
Notice that the id
changes immediately, but the rest of the object remains correct. Naturally, my first thought was “Somehow the value is being overwritten”, so I set up a watcher to see if it was being accessed subsequently:
watch(
games,
(newValue, oldValue) => {
console.log("Old:", oldValue[0]?.playerSummaries[0])
console.log("New:", newValue[0]?.playerSummaries[0])
},
{ deep: true }
)
//Output
//Old: undefined
//New: Proxy(Object) {id: 8480012, teamId: 3, firstName: 'Blake', lastName: 'Wheeler', number: 17, …}
But as you can see, the watcher is triggered just once.
I recognize that providing insight is difficult without being able to see the issue reproduced, but I have not been able to do so without Vue3.
Some notes:
- The incorrect
id
belongs to a different player in the same array. - It is consistently the same wrong
id
.
Why is the id
changing?
Raw API Response:
Vue ref: