Is it possible for vue-apollo to return different results from the Playground?

Question

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": "[email protected]",
        },
        {
            "email": "[email protected]",
        }
    ]
}

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":"[email protected]",
            "__typename":"Account"
         },
         {
            "email":"[email protected]",
            "__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).

Answer 1

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.

Answer 2

From Guillaume Chau (https://github.com/Akryum):

This is because the Apollo Client cache can't compute a different ID for the two items, so you endup with Account:undefined (or similar) for both. Open the Apollo devtools and look at the myAccounts key in the cache.

Learn more: https://www.apollographql.com/docs/react/caching/cache-configuration/