I have a GraphQL query called myAccounts
which returns an array of accounts. When I go to the Playground and call the query:
{
accounts {
email
}
}
I get this result:
"data": {
"accounts": [
{
"email": "zach@email-one.com",
},
{
"email": "zach@email-two.com",
}
]
}
However, when I am in my Component, vue-apollo
returns two items in the array, but seems to overwrite the second item with the first. Here is the query (in MyAccounts.gql
):
query myAccounts {
accounts: myAccounts {
email
}
}
and here is the Apollo query in the component:
import MY_ACCOUNTS_QUERY from '~/apollo/queries/MyAccounts'
...
apollo: {
accounts: {
query: MY_ACCOUNTS_QUERY,
result(data) {
console.log(JSON.stringify(data))
}
}
}
and here is what vue-apollo
logs out through the result
:
{
"data":{
"accounts":[
{
"email":"zach@email-one.com",
"__typename":"Account"
},
{
"email":"zach@email-one.com",
"__typename":"Account"
}
]
},
"loading":false,
"networkStatus":7,
"stale":false
}
Expected behavior
I would expect the data returned in the Playground to be identical to what vue-apollo
is fetching.
Versions
vue: 2.6.10
vue-apollo: @nuxtjs/apollo: 4.0.0-rc18
Additional context
I thought the result
hook would be the best way to debug, but any other suggestions gladly welcomed. I assumed that this was a bug in our code, but I cannot figure out what could be causing the repetition (and mismatch).
Apollo normalizes its cache based on the __typename
and the id
(or _id
) field. You need to include an id
or _id
field in your selection set alongside email
. Failing to do so results in both objects being assigned the same key. If you don't have an id
field to request, you'll need to provide a custom dataIdFromObject
function as shown here.