阿波罗读取乐观响应的片段

Question

我想做什么

• 我有一个应该可以离线运行的应用。
• 有一个项目列表。我可以通过突变将 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-file 中项目的详细信息：

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

问题

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

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

其他意见

当我在 Mutation update 函数中写入并立即读取片段时，我能够得到它。

  cache.writeFragment({
    fragment: ITEM_FRAGMENT,
    data: item,
    id: item._id,
  });
  const data = cache.readFragment({
    fragment: ITEM_FRAGMENT,
    id: item._id,
  });
  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 不适用于来自乐观响应的值。

也许这里有人知道我缺少什么，或者实现此功能的不同方法

Answer 1

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

readFragment(options, optimistic)

（optimistic 默认为false。）

在你的情况下：

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