vue-apollo 是不是可以从 Playground 返回不同的结果？

Posted 2023-03-04

【中文标题】vue-apollo 是不是可以从 Playground 返回不同的结果？

【英文标题】：Is it possible for vue-apollo to return different results from the Playground?vue-apollo 是否可以从 Playground 返回不同的结果？

【发布时间】：2020-03-27 16:33:17

【问题描述】：

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

    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.10 vue-apollo：@nuxtjs/apollo: 4.0.0-rc18

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

【参考方案1】：

来自 Guillaume Chau (https://github.com/Akryum)：

这是因为 Apollo 客户端缓存无法计算不同的 ID 对于这两个项目，所以你最终得到 Account:undefined （或类似的） 对彼此而言。打开 Apollo devtools 并查看 myAccounts 键 缓存。

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

【参考方案2】：

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

【讨论】：

感谢您链接到dataIdFromObject 函数。了解这一点很有帮助。

不推荐使用 dataIdFromObject 的更新，取而代之的是 TypePolicy 对象的 keyFields 选项。 apollographql.com/docs/react/caching/cache-configuration/…