You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何避免重复获取客户端已有的GraphQL数据?(基于@apollo/client)

基于Apollo Client的关联数据复用方案咨询

我的数据库存在简单关联,目前通过以下两个GraphQL查询获取数据:

// 先执行的MakerOrders查询
maker {
  id
  orders {
    id
    customer {
      id
    }
  }
}

// MakerOrders之后执行的MakerProducts查询
maker {
  products {
    id
    order {
      id
      customer {
        id
      }
    }
  }
}

关联规则:

  • 订单与客户:一对一
  • 产品与订单:一对一(可为空)

执行逻辑是先通过MakerOrders获取订单数据,之后再用MakerProducts获取产品数据。需要注意的是:如果产品关联了订单,该订单一定已经存在于MakerOrders的本地缓存中。

我的核心需求是:找到一种简便方法,既能避免从服务器重复拉取订单的关联字段(比如customer),又能自动实现产品与订单的关联,还不用在客户端手动拼接状态。

目前直接用@apollo/client的useQuery(MakerProducts)会导致服务器重复返回customer数据,因为服务器不知道客户端缓存里已经有了。

我现在有一个可行方案:从MakerProducts的查询中移除customer字段,然后在客户端通过缓存读取补全数据,代码如下:

const client = useApolloClient()

const { data } = useQuery(MakerProducts)

const products = data.maker.products.map(p => {
  const order = client.readFragment({
    id: `Order:${p.order.id}`,
    fragment: fragments.OrderFields
  })
  return { ...p, order }
})

但我想知道有没有更简洁的方案,比如通过客户端的getter(类似product.getOrder这种形式)来实现,而不是像上面这样显式地手动读取字段拼接。我清楚GraphQL只是规范,本身没有相关规定,但希望得到基于@apollo/client的具体建议。


内容的提问来源于stack exchange,提问作者jsindos

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.21 20:32:57