useLazyLoadQuery

useLazyLoadQuery

在渲染期间用于获取 GraphQL 查询的 Hook。如果使用不当，此 Hook 会触发多个嵌套或级联往返，并且会等到渲染后才开始获取数据（通常可以在渲染之前开始获取数据），从而降低性能。建议使用 usePreloadedQuery 来替代。

const React = require('React');

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

function App() {
  const data = useLazyLoadQuery(
    graphql`
      query AppQuery($id: ID!) {
        user(id: $id) {
          name
        }
      }
    `,
    {id: 4},
    {fetchPolicy: 'store-or-network'},
  );

 return <h1>{data.user?.name}</h1>;
}

参数

• query: 使用 graphql 模板文字指定的 GraphQL 查询。
• variables: 包含用于获取查询的变量值的 Object。这些变量需要与查询中声明的 GraphQL 变量匹配。
• options: [可选] 选项对象
  • fetchPolicy: 确定是否使用缓存数据，以及何时根据当前在 Relay 存储中可用的缓存数据发送网络请求（有关更多详细信息，请参阅我们的 获取策略 和 垃圾收集 指南）
    • "store-or-network": (默认) 会 重新使用本地缓存的数据，并且只会在查询中缺少任何数据时才会发送网络请求。如果查询已完全缓存，则不会发出网络请求。
    • "store-and-network": 会 重新使用本地缓存的数据，并且始终会发送网络请求，无论本地缓存中是否缺少数据。
    • "network-only": 不会 重新使用本地缓存的数据，并且始终会发送网络请求以获取查询，忽略 Relay 中可能本地缓存的任何数据。
    • "store-only": 只会重新使用本地缓存的数据，并且绝不会发送网络请求来获取查询。在这种情况下，获取查询的责任由调用方承担，但此策略也可以用于读取和操作完全本地的数据。
  • fetchKey: 可以传递 fetchKey 来强制在组件重新渲染时重新评估当前查询和变量，即使变量没有改变，或者组件没有重新挂载（类似于将不同的 key 传递给 React 组件会导致它重新挂载）。如果 fetchKey 与之前渲染中使用的 fetchKey 不同，则当前查询将根据存储进行重新评估，并且根据当前的 fetchPolicy 和缓存状态，它可能需要重新获取。
  • networkCacheConfig: [可选] 默认值：{force: true}。包含针对网络层的缓存配置选项的对象。请注意，网络层可能包含一个额外的查询响应缓存，它将重用针对相同查询的网络响应。如果您想完全绕过此缓存（这是默认行为），请将 {force: true} 作为此选项的值传递。

返回值

• data: 包含已从 Relay 存储中读取的数据的 Object；该 Object 匹配指定查询的形状。
  • 数据对应的 Flow 类型也将匹配此形状，并包含从 GraphQL Schema 派生的类型。例如，上述 data 的类型为：{| user: ?{| name: ?string |} |}。

行为

• 预期 useLazyLoadQuery 已在 RelayEnvironmentProvider 下渲染，以便访问正确的 Relay 环境，否则将抛出错误。
• 调用 useLazyLoadQuery 将获取并渲染此查询的数据，并且它可能会挂起，具体取决于指定的 fetchPolicy，以及缓存的数据是否可用，或者是否需要发送网络请求并等待。如果 useLazyLoadQuery 导致组件挂起，则需要确保有一个 Suspense 祖先包装此组件以显示适当的加载状态。
  • 有关 Suspense 的更多详细信息，请参阅我们的 使用 Suspense 的加载状态 指南。
• 该组件会自动订阅查询数据更新：如果此查询的数据在应用中的任何位置更新，该组件将自动重新渲染以显示最新的更新数据。
• 在使用 useLazyLoadQuery 的组件提交后，重新渲染/更新该组件不会导致再次获取查询。
  • 如果使用不同的查询变量重新渲染该组件，则会导致再次使用新的变量获取查询，并可能使用不同的数据重新渲染。
  • 如果该组件卸载并重新挂载，则会导致重新获取当前查询和变量（取决于 fetchPolicy 和缓存状态）。

与 QueryRenderer 的区别

• useLazyLoadQuery 不再将 Relay 环境作为参数，因此不再像 QueryRenderer 那样在 React 上下文中设置环境。相反，useLazyLoadQuery 应该用作 RelayEnvironmentProvider 的后代，后者现在在上下文中设置 Relay 环境。通常，您应该在应用程序的最顶层渲染单个 RelayEnvironmentProvider，为整个应用程序设置单个 Relay 环境。
• useLazyLoadQuery 将使用 Suspense 以便开发人员可以使用 Suspense 边界渲染加载状态，并且如果发生网络错误，将抛出错误，这些错误可以被捕获并使用错误边界进行渲染。这与向 QueryRenderer 渲染函数提供错误对象或 null 属性以指示错误或加载状态不同。
• useLazyLoadQuery 完全支持获取策略，以便重用 Relay 存储中缓存的数据，而不是仅仅依靠网络响应缓存。
• useLazyLoadQuery 对其返回的数据具有更好的类型安全保证，而 QueryRenderer 无法实现，因为我们无法使用渲染器 API 对数据的类型进行参数化。

---

此页面是否有用？

通过以下方式帮助我们改进网站 回答几个快速问题.