QueryRenderer在Relay Modern中的作用?

时间:2017-05-18 11:40:15

标签: reactjs graphql relay

所以,首先一点背景。 我是一名原生的iOS / Android开发人员,现在正在开始我的第一个React Native项目。它带来了Javascript的所有好处和痛苦,但到目前为止我非常喜欢它:-)我还决定第一次尝试使用GraphQL。

对于React环境的新手,我也没有任何关于Relay的先验知识,但是在我的创业社区的朋友和我的web-dev同事的推荐下选择了它。我也被警告过一个有点陡峭的学习曲线,但无论如何我决定继续 - 我已经在与JS和一个新的移动平台的0.xx版本进行一场艰苦的战斗,所以到底是什么,对吧? :-)我设法正确地设置了我的项目并用QueryRenderer整理到我的GQL服务器,这是一个很大的解脱: - )

所以,关于问题

我很难搞清楚容器/组件的关系以及容器组成。阅读the docs on composition有帮助,但我对QueryRenderer

的作用仍有疑问
    文档称
  • QueryRenderer是每个中继树的根容器。这是否意味着应该在我们的应用中为根提供QueryRenderer?或者在每个导航路径的根目录(即我们的应用程序中的标签)?或者仅针对每个容器组件(与表示/哑/纯组件相反,React明智)?请注意,我不是在寻找意见,而是寻求最佳实践的论据: - )
  • FragmentContainer(或其他任何容器)可以在“父”组件中没有QueryRenderer的情况下工作吗?
  • QueryRenderer如何链接到子容器?它是否获取子容器所需的所有数据的总和,然后从缓存中读取子容器,或者?如果是这样,我误解了Relay的优点 - 我们认为每个组件都可以独立于其他所有组件检索数据,并且每个组件都不了解其他组件(包括父/子组件)的数据要求)。我认为这个假设也使我对QueryRenderer和“Root”容器的需求感到困惑。
  • 如果QueryRenderer是继电器树的“父”/“根”中继容器,那么基于它的请求如何呈现视图组件呢?为什么它必须有一个请求?何时以及我们应该使用QueryRenderer

非常感谢任何帮助: - )

2 个答案:

答案 0 :(得分:9)

感谢您提出这个话题。我也刚刚使用ReactNative进入Relay,并获得了一些令人兴奋的结果。

首先,我很惊讶将反映GraphQL数据库的UI组件带到屏幕上是多么容易。在学习了JavaScript和反应原生流水线的基础知识的最初开销之后,Relay已成为呈现数据的绝佳方式。

关于最佳实践,我无法确定如何展示您的 QueryRenderer和fragmentContainer,但我可以描述我们呈现数据的方式。

首先,我们创建一个反应导航堆栈和选项卡。在每个主屏幕内,我们运行QueryRenderer。然后在该QueryRenderer中,对于每个特定的UI组件,我们分成一个fragmentContainer。

  • 导航流程(反应导航,堆栈/标签导航器)
  • 屏幕(QueryRenderer)用户界面
  • 小部件/组件(fragmentContainer)

这允许我们为屏幕创建所需的主查询,然后分解组件数据以适应易于由其所代表的GraphQL查询片段定义的可消耗组件。但是,这确实意味着我们在整个应用程序中运行多个查询而没有中央帐户查询将整个呈现包装成一个整洁的包。

理想情况下,我想尝试在导航器顶部的QueryRenderer,但是我还没有完全了解如何以及如果这将起作用,因为导航器不响应render()函数,这是QueryRenderer是必需的。

我也有兴趣听听其他人如何在可导航的本地应用程序中应用中继的方法。

答案 1 :(得分:9)

因此,在使用我们的应用程序进行了更多工作之后,我想我会回来发布关于我们迄今为止的想法和经验,希望它可以帮助某人。

在@Peter Suwara的伟大帖子的基础上,我们最初达成了类似的策略

  • 拥有根/父导航树
  • 对于树中的每个屏幕,将QueryRenderer作为其包含的所有表示/哑元组件的根目录
  • 使用片段在子组件中声明数据依赖性

就像我们在下面的评论中讨论过他的答案一样,这种方法可能并不总是最好的。经过内部的进一步讨论后,我们得出的结论是,由于以下几个原因,有太多案例可能没有意义:

  • 如果您检索每个屏幕加载的数据,您通常会得到比所需更多的往返次数。您希望将app-flow考虑在内,并获取尽可能多的数据,以及路由及其子项所需的数据。
  • 此外,如果您在同一个QueryRenderer上检索屏幕的子组件的所有数据,您有时可能会最终获取永远不会向用户显示的数据(即很少显示的详细信息视图的详细信息,或者类似的情况)。

经过一番思考和讨论后,我们想出了什么时候创建Relay树的新QueryRenderer“root”这个经验法则:

为您需要新的错误处理策略时创建新的QueryRenderer

这是因为非常实际的原因,它是你必须处理数据错误/加载的唯一机会,但它对用户流和组合方式也有意义,因为通常这两件事发生冲突 - 你想要一种新的方式来处理网络错误,当你到达你的应用程序的新“流”/部分。也许Facebook的一些聪明人在我们面前想到了这一点? : - )

与所有经验法则一样,它只是 - 指南,而不是规则,当然也有例外。然而,它似乎对我们内部有意义 - 至少目前如此。

对这些想法的任何和所有反馈都非常受欢迎,因为我认为官方文档至少可以说是乏善可陈,因此社区讨论是我们所有的,直到文档和一般模式随着时间的推移而解决。