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

Question

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

例如。

/parent/child/:id/something

父路由将有一个查询并获取一些数据，子路由（具有特定 id）和最终的第三个查询可能在“某物”视图中以请求其他数据。

所以当我直接去的时候，我/parent/child/:id/something怎样才能得到所有的数据而不做 3 个 graphql 请求而只做 1 个呢？如果那不可能，如何至少使请求并行运行，这样我就不必等待第一个、第二个和第三个？

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

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

标签： react-routerapolloreact-apolloapollo-client

Answer 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
   }
}