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

Posted 2023-02-22

【中文标题】阿波罗读取乐观响应的片段

【英文标题】：Apollo readFragment of optimistic response

【发布时间】：2020-12-14 05:09:16

【问题描述】：

我想做什么

我有一个应该可以离线运行的应用。 有一个

项目列表

。我可以通过突变将

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
      );

问题

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

对于由 Mutation 更新功能添加的项目，我得到 null 我得到了从后端获取的项目的预期对象 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 不适用于来自乐观响应的值。

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

【问题讨论】：

你有没有找到任何其他信息？

不，不幸的是：(

【参考方案1】：

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

readFragment(options, optimistic)

（optimistic 默认为false。）

在你的情况下：

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

【讨论】：

感谢您的回答，明年我会看看并更新这个问题是否有效。