vue.js 阿波罗读取乐观回应片段

anhgbhbe  于 2022-12-14  发布在  Vue.js
关注(0)|答案(2)|浏览(126)

我想做的是

  • 我有一个应用程序,应该脱机工作。
  • 有一个项目列表。我可以通过一个变体将一个项目添加到此列表中。
  • 变异的更新函数将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
      });

问题

将项目添加到Query-result中工作正常。当我尝试读取片段时:
1.对于由突变更新函数添加的项目,我得到null
1.我得到了从后端获取的项的预期对象。在readFragment中也有optimistic属性,但这没有什么区别。

其他观察结果

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

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",
}

摘要

readFragement不适用于来自乐观响应的值。
也许这里有人知道我缺少什么,或者有不同的方法来实现这个功能

z2acfund

z2acfund1#

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

readFragment(options, optimistic)

(默认情况下,optimisticfalse。)
在您的情况下:

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

qeeaahzv2#

当为一个正在通过变异创建的资源创建乐观响应时(例如item),我们需要为乐观数据分配某种临时id(参见文档中的示例)。这是因为真实的的资源还没有创建,我们不知道它的id。
因此,为了该高速缓存中读取乐观响应,我们需要使用相同的临时id(以及__typename),当变异完成并且缓存中有了真实的响应时,乐观响应被丢弃,我们可以使用真实id。
我最近在分配临时id时遇到了这个问题,但没有使用它该高速缓存中检索乐观响应,以便在那个等待变异完成的简短窗口中呈现更新的UI。

相关问题