首页 文章

不使用refetchQueries更新Apollo GraphQL缓存?

提问于
浏览
2

我有一个React应用程序访问带有Apollo客户端(版本1.x)的GraphQL服务器 . 有一个服务器模式,如下所示 .

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组成 . 选择一个不同的分支,等待几秒钟(没有优化的麻烦),它的工作原理 .

"magic"发生在 ShopSelectButton 组件中 . 如果你注释掉 refetchQueries 行,事情就会破裂 . 在服务器上正确选择了商店(重新加载后你会看到它),但客户端就像一只死去的动物 .

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

我想知道其他方法是什么 . 架构是否应该构建为更无状态并将状态保留在前端应用程序中?

1 回答

  • 1

    我认为突变应该工作而不需要重新查询查询 . 您只需要在变异结果体中添加相关查询中的所有必需数据 .

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

    要获得突变结果的所有必需数据以便正确更新,我建议您在应用中添加片段结构 . 这意味着所有需要商店数据的组件都有一个定义需求的片段字段 . 收集片段并添加到突变体中 . 当然,这样做可以使其他组件与突变之间具有相同的耦合 .

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

相关问题