分页组件不需要初始查询

Posted 2023-03-10

【中文标题】分页组件不需要初始查询

【英文标题】：Paginating component doesn't need initial query

【发布时间】：2017-07-21 01:22:20

【问题描述】：

我希望一个组件从其父组件接收其初始数据，同时仍然能够自行对数据进行分页。

例如，考虑

<Parent> //Makes initial GraphQL call
  <StaticChild/> //Uses initial data and never needs to rerender
  <DynamicChild/> //Paginates the same query that the Parent made, will need to rerender for every new "page"
</Parent>

<DynamicChild> 会是什么样子？我的理解是，为了能够访问 fetchMore（用于分页），您必须将 <DynamicChild> 包装在 graphql 函数中（来自 react-apollo）。但是 graphql 函数需要一个初始查询，而 <DynamicChild> 不需要这样做。我的选择似乎是：

a) 让<Parent> 处理分页。这意味着我必须向 <StaticChild> 添加一个 shouldComponentUpdate 方法。

b) 让 <DynamicChild> 进行与 <Parent> 类似的初始查询，并依靠 Apollo 从 Redux 存储中提取第二个查询（假设这两个查询不会一起批处理）。

c) 让<Parent> 进行初始查询并将 fetchMore() 回调传递给<DynamicChild>。我担心当<DynamicChild> 使用回调时，它仍然会尝试重新渲染<Parent>。

虽然这些解决方案很简单，但有没有办法让<DynamicChild> 定义自己的分页查询而不定义自己的初始查询？

【参考方案1】：

作为重新获取功能的示例，您可以查看使用 GraphQL 和 apollo 客户端 (feed page) 制作的应用的提要页面。

截至 b) 我认为它会在第一次进入页面时获取两次查询。我有一个类似的问题，查询是在父级和子级中获取的。

我认为你在 c) 中是对的，在调用 fetchMore 后它将重新呈现父级

【讨论】：

您发布的这个解决方案本质上是情况（b）。在第 44 行，该组件被赋予 FEED_QUERY 作为其初始查询。这就是我想要避免的。

我认为它的解决方案 c) 提要页面使用了 Feed 组件，该组件获得了 onLoadMore => fetchMore 功能。来自父母。