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 } }
。
- 数据的 Flow 类型也将匹配此形状,并包含从 GraphQL 架构派生的类型。例如,上面的
此页面有用吗?
通过 回答几个简短的问题.