usePaginationFragment

usePaginationFragment

您可以使用 usePaginationFragment 渲染使用 @connection 的片段并对其进行分页

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

const React = require('React');

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

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

function FriendsList(props: Props) {
  const {
    data,
    loadNext,
    loadPrevious,
    hasNext,
    hasPrevious,
    isLoadingNext,
    isLoadingPrevious,
    refetch, // For refetching connection
  } = usePaginationFragment(
    graphql`
      fragment FriendsListComponent_user on User
      @refetchable(queryName: "FriendsListPaginationQuery") {
        name
        friends(first: $count, after: $cursor)
        @connection(key: "FriendsList_user_friends") {
          edges {
            node {
              name
              age
            }
          }
        }
      }
    `,
    props.user,
  );

  return (
    <>
      <h1>Friends of {data.name}:</h1>

      <List items={data.friends?.edges.map(edge => edge.node)}>
        {node => {
          return (
            <div>
              {node.name} - {node.age}
            </div>
          );
        }}
      </List>
      <Button onClick={() => loadNext(10)}>Load more friends</Button>
    </>
  );
}

module.exports = FriendsList;

参数

• fragment：使用 graphql 模板字面量指定的 GraphQL 片段。
  • 此片段必须在连接字段上具有 @connection 指令，否则使用它将抛出错误。
  • 此片段必须具有 @refetchable 指令，否则使用它将抛出错误。@refetchable 指令只能添加到“可重新获取”的片段，即在 Viewer 或 Query 类型上声明的片段，或在实现 Node 的类型上声明的片段（即具有 id 的类型）。
    • 请注意，您无需手动指定分页查询。@refetchable 指令将使用指定的 queryName 自动生成一个查询。这还将为查询生成 Flow 类型，可从生成的以下文件导入：<queryName>.graphql.js。
• fragmentReference：片段引用是一个不透明的 Relay 对象，Relay 使用它从存储中读取片段数据；更具体地说，它包含有关应从哪个特定对象实例读取数据的信息。
  • 片段引用类型可以从生成的 Flow 类型中导入，从 <fragment_name>.graphql.js 文件中导入，并可用于声明 Props 的类型。片段引用类型的名称将为：<fragment_name>$key。我们使用我们的 lint 规则 来强制执行片段引用 prop 的类型声明正确。

返回值

包含以下属性的对象

• data：包含已从 Relay 存储中读取的数据的对象；该对象与指定片段的形状匹配。
  • 数据流类型也将与这种形状匹配，并包含从 GraphQL 架构派生的类型。
• isLoadingNext：布尔值，指示连接中下一个项目的分页请求当前是否正在进行中，包括任何增量数据有效载荷。
• isLoadingPrevious：布尔值，指示连接中上一个项目的分页请求当前是否正在进行中，包括任何增量数据有效载荷。
• hasNext：布尔值，指示连接在“向前”方向上是否已到达末尾。如果该方向上还有更多要查询的项目，则它将为 true，否则为 false。
• hasPrevious：布尔值，指示连接在“向后”方向上是否已到达末尾。如果该方向上还有更多要查询的项目，则它将为 true，否则为 false。
• loadNext：用于在连接中“向前”方向上获取更多项目的函数。
  • 参数
    • count: 指示在分页请求中查询多少个项目的数字。
    • options：[可选] 选项对象
      • onComplete：在重新获取请求完成后（包括任何增量数据有效载荷）将被调用的函数。如果请求过程中发生错误，则 onComplete 将使用 Error 对象作为第一个参数进行调用。
  • 返回值
    • disposable：包含 dispose 函数的对象。调用 disposable.dispose() 将取消分页请求。
  • 行为
    • 调用 loadNext 不会导致组件挂起。相反，isLoadingNext 值将在请求进行时设置为 true，来自分页请求的新项目将被添加到连接中，从而导致组件重新渲染。
    • 从调用 loadNext 启动的分页请求始终将使用与最初用于获取连接的相同变量，除了分页变量（为了执行分页，需要更改这些变量）；在分页期间更改分页变量以外的变量没有意义，因为这意味着我们正在查询不同的连接。
• loadPrevious：用于在连接中“向后”方向上获取更多项目的函数。
  • 参数
    • count: 指示在分页请求中查询多少个项目的数字。
    • options：[可选] 选项对象
      • onComplete：在重新获取请求完成后（包括任何增量数据有效载荷）将被调用的函数。如果请求过程中发生错误，则 onComplete 将使用 Error 对象作为第一个参数进行调用。
  • 返回值
    • disposable：包含 dispose 函数的对象。调用 disposable.dispose() 将取消分页请求。
  • 行为
    • 调用 loadPrevious 不会导致组件挂起。相反，isLoadingPrevious 值将在请求进行时设置为 true，来自分页请求的新项目将被添加到连接中，从而导致组件重新渲染。
    • 从调用 loadPrevious 启动的分页请求始终将使用与最初用于获取连接的相同变量，除了分页变量（为了执行分页，需要更改这些变量）；在分页期间更改分页变量以外的变量没有意义，因为这意味着我们正在查询不同的连接。
• refetch：用于使用可能的新变量集重新获取连接片段的函数。
  • 参数
    • variables：包含要用于获取 @refetchable 查询的新变量值集的对象。
      • 这些变量需要与片段内部引用的 GraphQL 变量匹配。
      • 但是，只需要指定打算在重新获取请求中更改的变量；从此输入中省略的片段引用的任何变量将回退到使用原始父查询中指定的 value。例如，要使用与最初获取时完全相同的变量重新获取片段，可以调用 refetch({})。
      • 类似地，传递 $id 变量的 id 值是可选的，除非片段希望使用不同的 id 重新获取。在重新获取 @refetchable 片段时，Relay 已经知道渲染对象的 ID。
    • options：[可选] 选项对象
      • fetchPolicy：确定是否应使用缓存数据，以及何时根据可用的缓存数据发送网络请求。有关完整规范，请参见 获取策略 部分。
      • onComplete：在重新获取请求完成后（包括任何增量数据有效载荷）将被调用的函数。
  • 返回值
    • disposable：包含 dispose 函数的对象。调用 disposable.dispose() 将取消重新获取请求。
  • 行为
    • 使用新变量集调用 refetch 将使用新提供的变量再次获取片段。请注意，您需要提供的变量仅是片段内部引用的变量。在本例中，这意味着通过传递新值到 lang 变量来获取当前渲染的评论的翻译正文。
    • 调用 refetch 将重新渲染您的组件，并且可能会导致它挂起，具体取决于指定的 fetchPolicy 以及是否需要发送网络请求以及是否需要等待网络请求才能获取缓存数据。如果重新获取导致组件挂起，您需要确保有一个 Suspense 边界包装此组件。
    • 有关 Suspense 的更多详细信息，请参见我们的 使用 Suspense 的加载状态 指南。

行为

• 组件会自动订阅片段数据的更新：如果此特定 User 的数据在应用程序的任何地方更新（例如，通过获取新数据或更改现有数据），该组件将自动使用最新的更新后的数据重新渲染。
• 如果缺少该特定片段的任何数据，并且父查询当前正在获取数据，则组件将挂起。
  • 有关 Suspense 的更多详细信息，请参见我们的 使用 Suspense 的加载状态 指南。
• 请注意，分页（loadNext 或 loadPrevious）不会导致组件挂起。

与 PaginationContainer 的区别

• 此 api 中不再需要指定分页查询，因为它将通过使用 @refetchable 片段由 Relay 自动生成。
• 此 api 原生支持同时进行双向分页。
• 此 api 不再需要传递 getVariables 或 getFragmentVariables 配置函数，如 PaginationContainer 所做的那样。
  • 这意味着分页不再具有 variables 和 fragmentVariables 之间的区别，这两个概念以前定义不清。分页请求将始终使用与最初用于获取连接的相同变量，除了分页变量（为了执行分页，需要更改这些变量）；在分页期间更改分页变量以外的变量没有意义，因为这意味着我们正在查询不同的连接。
• 此 api 不再接受其他配置，例如 direction 或 getConnectionFromProps 函数（如 Pagination Container 所做的那样）。这些值将由 Relay 自动确定。
• 重新获取不再区分 variables 和 fragmentVariables，这两个概念以前定义不清。重新获取将始终使用您提供的变量正确重新获取并渲染片段（输入中省略的任何变量将回退到使用父查询中的原始值）。
• 重新获取将明确更新组件，这在从 `PaginationContainer` 调用 `refetchConnection` 时并不总是如此（它将取决于您在重新获取查询中查询的内容，以及您的片段是否在正确对象类型上定义）。

---

此页面是否有用？

通过以下操作，帮助我们进一步改进网站： 回答几个简短的问题.