Question

我有一个名为myAccounts的GraphQL查询，该查询返回一个帐户数组。当我去游乐场并致电查询时：

{
    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正在获取的数据相同。

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

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

Answer 1

Apollo根据__typename和id（或_id）字段对缓存进行归一化。您需要在选择集中的id旁边添加一个_id或email字段。否则，两个对象都被分配了相同的密钥。如果没有id字段要求，则需要提供自定义的dataIdFromObject函数，如图here所示。

Answer 2

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

这是因为Apollo客户端缓存无法计算其他ID   这两个项目，因此您最终得到Account：undefined（或类似名称）   对彼此而言。打开Apollo devtools，然后看一下myAccounts键   缓存。

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

vue-apollo是否有可能从游乐场返回不同的结果？

2 个答案: