如何使用 Apollo 和 React Router 避免嵌套路由/查询组件的请求瀑布？

Posted 2023-03-10

【中文标题】如何使用 Apollo 和 React Router 避免嵌套路由/查询组件的请求瀑布？

【英文标题】：How to avoid request waterfalls with nested routes / query components using Apollo and React Router?

【发布时间】：2020-01-04 14:06:58

【问题描述】：

如果我有一些深度嵌套的路由，每个路由都包含一个查询组件，有没有办法组合这些查询或使用任何带有 apollo 客户端的路由解决方案并行运行它们？最好是 react-router。

例如。

/parent/child/:id/something

父路由会有一个查询并获取一些数据，子路由（具有特定 id）也会有，最终第三个查询可能会在“某物”视图中请求额外数据。

所以当我直接去/parent/child/:id/something 时，如何在不执行 3 个 graphql 请求但只执行 1 个的情况下获取所有数据？如果这不可能，如何至少让请求并行运行，这样我就不必等待第一个，第二个和第三个？

令我大吃一惊的是，尚未为 Apollo 客户找到任何有关此性能瓶颈和解决它们的潜在解决方案的信息。

我查看了 react-router-config 以设置静态路由，但仍然不确定要在其中编写什么逻辑来解决问题？

【参考方案1】：

是的，Apollo 不支持您的用例。 如果您想将 3 个请求打包成 1 个，也许解决方案是在您的 graphQLServer 中创建一个新查询并调用 3 次到您的后端服务，并返回您所有的预期数据，因此您的客户端只需要调用一次而不是几次次。你在客户端所做的只是传递道具 如果第二个需要第一个的 ID，而第三个需要第二个的 ID，您如何并行运行它。这是不可能的

---

更新答案：如果所有这些查询都需要一个 ID，我认为你可以这样做。希望我没有弄错你的问题。

query bigQuery($id: String!)
   query1(id: $id) 
      field1
      field2
   
   query2(id: $id) 
      field1
      field2
   
   query3(id: $id) 
      field1
      field2
   

【讨论】：

“数据获取”并行。 ;-) 你确实知道来自 URL 的 id。我相信我听说组合查询或并行获取确实可以使用静态路由，例如 react-router-config。但是问题如何

哦，这对我来说是新事物。来自 URL 的 id 是否用于这 3 个请求？如果一个 ID 用于 3 个请求，您可以简单地将这 3 个查询合并为 1 个是吗？我已经更新了我的答案。

/parent 不会有 id。这是关于在每个级别上进行查询，只获取该级别所需的内容。