流式分页

此外，我们可以将 usePaginationFragment 与 Relay 的增量数据交付功能结合起来，以获取连接并增量接收连接中的每个项目，而不是等待整个项目列表在单个负载中返回。当例如计算连接中的每个项目是服务器中的一个昂贵操作时，这可能很有用，并且我们希望能够尽快显示列表中的第一个项目（或项目），而不会阻塞在我们需要变得可用的所有项目上；例如，在新闻提要中，用户理想情况下可以查看并开始与第一个故事进行交互，而额外的故事则在下面加载。

为了做到这一点，我们可以使用 @stream_connection 指令而不是 @connection 指令。

import type {FriendsListComponent_user$key} from 'FriendsList_user.graphql';

const React = require('React');

const {graphql, usePaginationFragment} = require('react-relay');

type Props = {
  user: FriendsListComponent_user$key,
};

function FriendsListComponent(props: Props) {
  // ...

  const {
    data,
    loadNext,
    hasNext,
  } = usePaginationFragment(
    graphql`
      fragment FriendsListComponent_user on User
      @refetchable(queryName: "FriendsListPaginationQuery") {
        name
        friends(first: $count, after: $cursor)
        @stream_connection(key: "FriendsList_user_friends", initial_count: 2,) {
          edges {
            node {
              name
              age
            }
          }
        }
      }
    `,
    props.user,
  );

  return (...);
}

module.exports = FriendsListComponent;

让我们提炼一下这里发生了什么

• @stream_connection 指令可以直接替换 @connection 指令；它接受与 @connection 相同的参数，以及控制流式的其他可选参数。
  • initial_count: Int：一个数字（默认为零），控制初始负载中将包含多少个项目。任何后续项目都将流式传输，因此当设置为零时，列表最初将为空，并且所有项目都将流式传输。请注意，此数字不会影响返回的总数，而只会影响初始负载中包含的项目数。例如，考虑一个产品，今天它最初获取 2 个项目，然后立即发出一个分页查询以获取 3 个更多项目。使用流式传输，该产品可以选择在初始查询中使用 initial_count=2 获取 5 个项目，以便快速获取 2 个项目，同时避免为后续的 3 个项目进行往返。
• 与使用 usePaginationFragment 的常规用法一样，连接将在服务器从服务器流式传输新项目时自动更新，并且组件将在每次使用连接中的最新项目重新渲染时重新渲染。

---

此页面有用吗？

通过 回答几个快速问题.