javascript - 不使用 refetchQueries 更新 Apollo GraphQL 缓存？

Question

我有一个使用 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 不知道如何更新根查询缓存指针。

我已经用 CodeSandbox 制作了代表问题的完整工作演示.后端是用 Apollo LaunchPad 制作的.选择一个不同的分支，等待几秒钟(没有进行优化)并且它有效。

“魔法”发生在 ShopSelectButton 组件中。如果您注释掉 refetchQueries 行，事情就会崩溃。商店在服务器上被正确选择(并且您在重新加载后会看到它)，但客户端就像一只死去的动物。

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

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

Answer 1

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

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

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

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