Может ли vue-apollo возвращать разные результаты с игровой площадки?

Question

У меня есть запрос GraphQL под названием myAccountsкоторый возвращает массив учетных записей. Когда я выхожу на площадку и вызываю запрос:

{
    accounts {
        email
    }
}

Получаю такой результат:

"data": {
    "accounts": [
        {
            "email": "[e-mail]",
        },
        {
            "email": "[e-mail]",
        }
    ]
}

Однако когда я нахожусь в своем Компоненте, vue-apolloвозвращает два элемента в массиве, но, кажется, перезаписывает второй элемент первым. Вот запрос (вMyAccounts.gql):

query myAccounts {
    accounts: myAccounts {
        email
    }
}

и вот запрос Apollo в компоненте:

import MY_ACCOUNTS_QUERY from '~/apollo/queries/MyAccounts'
...
apollo: {
    accounts: {
        query: MY_ACCOUNTS_QUERY,
        result(data) {
            console.log(JSON.stringify(data))
        }
    }
}

и вот что vue-apollo выходит из системы через result:

{
   "data":{
      "accounts":[
         {
            "email":"[e-mail]",
            "__typename":"Account"
         },
         {
            "email":"[e-mail]",
            "__typename":"Account"
         }
      ]
   },
   "loading":false,
   "networkStatus":7,
   "stale":false
}

Ожидаемое поведение. Я ожидал, что данные, возвращаемые в Playground, будут идентичны тем, чтоvue-apollo приносит.

Версииvue:2.6.10vue-apollo: @nuxtjs/apollo: 4.0.0-rc18

Дополнительный контекст, который я подумалresulthook будет лучшим способом отладки, но любые другие предложения с радостью приветствуются. Я предположил, что это ошибка в нашем коде, но я не могу понять, что могло вызвать повторение (и несоответствие).

Answer 1

Apollo нормализует свой кеш на основе __typename и id (или _id) поле. Вам необходимо включитьid или _id поле в вашем выборе, установленное рядом с email. В противном случае обоим объектам будет назначен один и тот же ключ. Если у вас нетid поле для запроса, вам необходимо указать настраиваемый dataIdFromObjectкак показано здесь.

Answer 2

От Гийома Чау (https://github.com/Akryum):

Это связано с тем, что кэш клиента Apollo не может вычислить разные идентификаторы для двух элементов, поэтому вы получаете Account:undefined (или аналогичный) для обоих. Откройте инструменты разработки Apollo и посмотрите на ключ myAccounts в кеше.

Узнать больше: https://www.apollographql.com/docs/react/caching/cache-configuration/