跳至主要内容
版本: v18.0.0

usePreloadedQuery

usePreloadedQuery

用于访问由先前调用 loadQuery 或借助 useQueryLoader 获取的数据的钩子。这实现了“边获取边渲染”模式

  • 调用从 useQueryLoader 返回的 loadQuery 回调。这将在 React 状态中存储查询引用。
    • 您也可以直接调用导入的 loadQuery,它返回一个查询引用。在这种情况下,将该项目存储在状态或 React 引用中,并在不再使用它时对该值调用 dispose()
  • 然后,在您的渲染方法中,使用 usePreloadedQuery() 使用查询引用。如果查询仍在挂起,此调用将暂停,如果查询失败,则会抛出错误,否则将返回查询结果。
  • 此模式优于 useLazyLoadQuery(),因为它可以更早地获取数据,而不会阻塞渲染。

有关更多信息,请参阅 渲染查询 指南。


import type {AppQueryType} from 'AppQueryType.graphql';

const React = require('React');

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

const AppQuery = graphql`
query AppQuery($id: ID!) {
user(id: $id) {
name
}
}
`;

type Props = {
initialQueryRef: PreloadedQuery<AppQueryType>,
};

function NameLoader(props) {
const [queryReference, loadQuery] = useQueryLoader(
AppQuery,
props.initialQueryRef, /* e.g. provided by router */
);

return (<>
<Button
onClick={() => loadQuery({id: '4'})}
disabled={queryReference != null}
>
Reveal your name!
</Button>
<Suspense fallback="Loading...">
{queryReference != null
? <NameDisplay queryReference={queryReference} />
: null
}
</Suspense>
</>);
}

function NameDisplay({ queryReference }) {
const data = usePreloadedQuery(AppQuery, queryReference);

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

参数

  • query: 使用 graphql 模板字面量指定的 GraphQL 查询。
  • preloadedQueryReference: PreloadedQuery 查询引用,可从 useQueryLoader 获取,也可以通过调用 loadQuery() 获取。

返回值

  • data: 包含从 Relay 存储读取数据的对象;该对象与指定查询的形状匹配。
    • 数据的 Flow 类型也将匹配此形状,并包含从 GraphQL 架构派生的类型。例如,上面的 data 类型是:{ user: ?{ name: ?string } }

此页面有用吗?

通过 回答几个简短的问题.