1

我有一个调用 GraphQL 查询myAccounts，它返回一个帐户数组。当我去游乐场并调用查询时：

{
    accounts {
        email
    }
}

我得到这个结果：

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

但是，当我在我的组件中时，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":"zach@email-one.com",
            "__typename":"Account"
         },
         {
            "email":"zach@email-one.com",
            "__typename":"Account"
         }
      ]
   },
   "loading":false,
   "networkStatus":7,
   "stale":false
}

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

版本 vue: 2.6.10 vue-apollo:@nuxtjs/apollo: 4.0.0-rc18

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

4

2 回答 2

2

Apollo 基于__typename和id（或_id）字段对其缓存进行规范化。您需要在您的选择集中包含一个idor_id字段email。不这样做会导致两个对象被分配相同的键。如果您没有id要请求的字段，则需要提供一个自定义函数，如此处dataIdFromObject所示。

于 2019-12-03T05:10:36.647 回答
0

来自纪尧姆周（https://github.com/Akryum）：

这是因为 Apollo 客户端缓存无法为这两个项目计算不同的 ID，因此您最终会得到 Account:undefined （或类似的）两者。打开 Apollo devtools 并查看缓存中的 myAccounts 键。

了解更多： https ://www.apollographql.com/docs/react/caching/cache-configuration/

于 2019-12-03T03:50:41.650 回答