graphql - vue-apollo 是否有可能从 Playground 返回不同的结果？

Question

我有一个名为 myAccounts 的 GraphQL 查询，它返回帐户数组。当我去 Playground 并调用查询时:

{
    accounts {
        email
    }
}

我得到这个结果:

"data": {
    "accounts": [
        {
            "email": "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5822393b30183d353931347537363d763b3735" rel="noreferrer noopener nofollow">[email protected]</a>",
        },
        {
            "email": "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cdb7acaea58da8a0aca4a1e0b9baa2e3aea2a0" rel="noreferrer noopener nofollow">[email protected]</a>",
        }
    ]
}

但是，当我在组件中时，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 通过 结果 记录的内容:

{
   "data":{
      "accounts":[
         {
            "email":"<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="324853515a72575f535b5e1f5d5c571c515d5f" rel="noreferrer noopener nofollow">[email protected]</a>",
            "__typename":"Account"
         },
         {
            "email":"<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="324853515a72575f535b5e1f5d5c571c515d5f" rel="noreferrer noopener nofollow">[email protected]</a>",
            "__typename":"Account"
         }
      ]
   },
   "loading":false,
   "networkStatus":7,
   "stale":false
}

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

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

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

Answer 1

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