阿波罗Apollo阅读乐观回应片段

问题描述

我想做什么

• 我有一个可以离线使用的应用程序。
• 有一个项目列表。我可以添加一个 Item 到此列表中，并进行更改。
• 变异的更新功能将 Item 添加到 Item-list 。 （乐观的回应）
• 当我单击项目时，我想查看详细信息。

我的实现

突变更新功能的内容：

  const queryData = cache.readQuery<{ items: Item[] }>({
    query: MY_QUERY,variables: {
      filter
    }
  });
  if (!queryData?.items) {
    return;
  }
  const newData = [...queryData.items,newItem];
  cache.writeQuery({
    query: MY_QUERY,data: { items: newData },variables: {
      filter
    }
  });

在vue文件中获取该项目的详细信息：

apolloProvider.clients.defaultClient
      .readFragment<Item>({
        fragment: ITEM_FRAGMENT,id:id
      });

问题

将项目添加到查询结果中可以正常工作。 当我尝试读取片段时：

1. 对于由Mutation更新功能添加的项目，我得到空
2. 我得到了从后端获取的项目的预期对象 readFragment中还有一个optimistic属性，但这没什么区别。

其他观察结果

当我编写并立即读取Mutation更新功能中的片段时，我就能得到它。

  cache.writeFragment({
    fragment: ITEM_FRAGMENT,data: item,id: item._id,});
  const data = cache.readFragment({
    fragment: ITEM_FRAGMENT,});
  console.log({ data }); // This logs my item Object

打包版本：

{
"@nuxtjs/apollo": "^4.0.1-rc.3","apollo-cache-persist": "^0.1.1","nuxt": "^2.0.0",}

摘要

apollo.readFragement不适用于乐观响应中的值。

也许这里的某个人对我所缺少的有所了解，或者采用了不同的方法来实现此功能

解决方法

要从 apollo 缓存中获取乐观值，您需要在 true 调用中添加 readFragment 作为第二个参数。

readFragment(options,optimistic)

（默认情况下，optimistic 为 false。）

就你而言：

apolloProvider.clients.defaultClient
  .readFragment<Item>({
    fragment: ITEM_FRAGMENT,id:id
  },true);