vue-apollo 是否有可能 return 来自 Playground 的不同结果？

Question

我有一个名为 myAccounts 的 GraphQL 查询，其中 returns 一组帐户。当我去游乐场并调用查询时：

{
    accounts {
        email
    }
}

我得到这个结果：

"data": {
    "accounts": [
        {
            "email": "zach@email-one.com",
        },
        {
            "email": "zach@email-two.com",
        }
    ]
}

然而，当我在我的组件中时，vue-apollo returns 数组中的两个项目，但似乎用第一个覆盖了第二个项目。这是查询（在 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":"zach@email-one.com",
            "__typename":"Account"
         },
         {
            "email":"zach@email-one.com",
            "__typename":"Account"
         }
      ]
   },
   "loading":false,
   "networkStatus":7,
   "stale":false
}

预期行为 我希望 Playground 中返回的数据与 vue-apollo 正在获取的数据相同。

版本观点：2.6.10 vue-阿波罗：@nuxtjs/apollo: 4.0.0-rc18

其他上下文 我认为 result 挂钩是最好的调试方式，但欢迎任何其他建议。我认为这是我们代码中的一个错误，但我无法弄清楚是什么导致了重复（和不匹配）。

Answer 1

来自 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/

Answer 2

Apollo 根据 __typename 和 id（或 _id）字段规范化其缓存。您需要在 email 旁边的选择集中包含 id 或 _id 字段。不这样做会导致两个对象被分配相同的键。如果您没有要请求的 id 字段，则需要提供自定义 dataIdFromObject 函数，如 here.

所示

vue-apollo 是否有可能 return 来自 Playground 的不同结果？

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

graphql

apollo-client

nuxt.js

vue-apollo

graphql-playground