不使用 refetchQueries 更新 Apollo GraphQL 缓存？

我有一个使用 Apollo 客户端（版本 1.x）访问 GraphQL 服务器的 React 应用程序。有一个如下所示的服务器架构。

type Query {
  currentShop: Shop
}
type Shop {
  id: ID!
  name: String!
  products: [Product!]!
  ...etc
}

我有dataIdFromObject像这样定义。

const dataIdFromObject = o => {
  if (o.__typename != null && o.id != null) {
    return `${o.__typename}-${o.id}`
  }
  return null
}

在整个应用程序中，我运行查询来询问不同的字段currentShop。在不同的点上，也有一些突变正在改变currentShop并且突变总是返回结果Shop类型。然而，与currentShop所以 Apollo 不知道如何更新根查询缓存指针。

我已经制作了代表该问题的完整工作演示。后端是用阿波罗发射台 https://launchpad.graphql.com/vmm8wkpjl3。选择一个不同的分支，等待几秒钟（不关心优化）并且它可以工作。

“魔法”正在发生ShopSelectButton成分。如果你评论出来refetchQueries线，东西就坏了。在服务器上正确选择了商店（重新加载后您会看到它），但客户端的行为就像死动物一样。

我的问题是refetchQueries因为它使代码耦合得太紧密。我不想让应用程序的某一部分中有一个组件来了解任何其他组件及其需求。老实说，重新获取意味着它会绕过整个缓存，并且总是从后端读取，这在大多数情况下是不必要的。

我想知道还有什么其他方法可以解决这个问题。是否应该将架构构建得更加无状态，并将状态保留在前端应用程序中？

我认为突变应该可以在不重新获取查询的情况下工作。您只需在突变结果正文中添加相关查询中所需的所有数据即可。

您是否尝试安装chrome的apollo客户端开发工具扩展？在那里，您可以轻松查看不同查询中的 currentShop 元素是否通过 typename 和 id 与 Shop 类型相关。 如果是这种情况，apollo 应该在突变后更新。

为了获取突变结果正确更新所需的所有数据，我建议您向应用程序添加片段结构。这意味着需要来自商店的数据的所有组件都有一个定义需求的片段字段。 收集碎片并添加到突变体中。当然，这样做在其他组件和突变之间具有相同的耦合。

另一种选择是将商店类型的所有可能数据添加到突变结果中。