分页

在本章节中分页将是最后一个我们要学习的。我们将实现一个简单的分页功能以便用户能每次浏览部分数据而不是浏览整个 Link 列表数据。

准备 React 组件

再一次我们需要为新功能先编写 React 组件。其实我们稍稍调整当前的路由设置。 可以考虑 LinkList 组件用于两种不同的用例(和路由)。第一个是显示10个最高投票的链接。其第二个用例是将列表中的新链接显示为用户可以浏览的多个页面。

确保导入 Redirect 组件。

我们现在添加了两条新的路由:/top/new/:page。第二个从 url 读取 page 的值,以便这个信息在渲染的组件中可用,这里是 LinkList

跟路由 / 现在将重定向到最新的链接路由。

我们需要为 LinkList 组件添加类似的逻辑,以说明现在拥有的两个不同的职责

该查询现在接受我们将用于实现分页和排序的参数。 skip 定义查询的 偏移量。如果传递如 10 作为参数,这意味着列表的前10个不会被包含在响应中。first 定义了查询的 限制。如果传递如 5 作为参数,这意味着列表将包含前5个元素。

但是,当使用 graphql容器时,我们该如何传递变量?答案就是需要在包含查询的组件的位置。

在执行查询之前,将一个函数传递给 graphql,该函数接收组件的(ownProps)。就可以从路由中可以获得当前页面的信息 (ownProps.match.params.page) 并用来计算需要的链接数。

同样的我们也将在 new 页面包含排序参数 createdAt_DESC 以便明确哪些时间点的链接需要显示。而 /top 路由页面链接将是通过投票数来计算的。

我们还需要声明 LINKS_PER_PAGE 常量然后在 ListList 组件中导入。

实现页面跳转

接下来我们将需要实现在不同页面间的跳转。首先需要在 LinkList 组件中添加两个 按钮

由于安装程序稍微复杂一些,所以我们将以单独的方法计算要呈现的链接列表。

对于 newPage,只需返回查询返回的所有链接。这是合乎逻辑的,因为不需要对要呈现的列表进行任何手动修改。如果用户从 /top 路由加载组件,将根据投票数对列表进行排序,并返回前10个链接。

然后我们将实现 前一页后一页 按钮的功能。

这些的功能实现并不复杂。我们通过网址检索当前页面,并执行检查,以确保分页分页。然后,只需计算下一页,告诉路由器下一步导航。然后,路由器将重新加载组件,并在 url 中使用一个新的 page,用于计算要加载的正确的链接列表。通过在终端中输入 yarn start 来运行应用程序,并使用新的按钮在链接列表中分页!

最后的调整

通过我们对 ALL_LINKS_QUERY 的更改,我们注意到,突变的 更新 功能不再起作用。这是因为readQuery 现在也希望通过与之前定义的相同的变量。

注意: readQuery 的工作原理与用于实现搜索的 ApolloClient 上的 query 方法基本相同。但是,它不需要调用服务器,而是简单地解析对本地存储的查询!如果使用变量从服务器获取查询,则readQuery 也需要知道变量,以确保它能够从缓存中传递正确的信息。

这里发生的所有事情是根据用户当前是否位于 /top/new 路由上的变量计算。

最后,当创建新链接时,还需要调整 update 的实现。

我们现在已经在应用程序中添加了一个简单的分页系统,允许用户以小块方式加载链接,而不是将其全部加载到前端。

Unlock the next chapter
ApolloClient 中的 `query` 和 `readQuery` 有什么不同?
`readQuery` 总是通过网络获取数据,而 `query` 可以从缓存或远程检索数据
`readQuery` 只能用于读取数据,而 `query` 也可以用于写入数据
'readQuery' 以前称为 'query',两者的功能相同
`readQuery` 总是从本地缓存中读取数据,而 `query` 可能从缓存或远程检索数据