Version: Next ๐ง
usePreloadedQuery
usePreloadedQuery
#
Hook used to access data fetched by an earlier call to loadQuery
or with the help of useQueryLoader
. This implements the "render-as-you-fetch" pattern:
- Call the
loadQuery
callback returned fromuseQueryLoader
. This will store a query reference in React state.- You can also call the imported
loadQuery
directly, which returns a query reference. In that case, store the item in state or in a React ref, and calldispose()
on the value when you are no longer using it.
- You can also call the imported
- Then, in your render method, consume the query reference with
usePreloadedQuery()
. This call will suspend if the query is still pending, throw an error if it failed, and otherwise return the query results. - This pattern is encouraged over
useLazyLoadQuery()
as it can allow fetching data earlier while not blocking rendering.
For more information, see the Rendering Queries guide.
#
Argumentsquery
: GraphQL query specified using agraphql
template literal.preloadedQueryReference
: APreloadedQuery
query reference, which can be acquired fromuseQueryLoader
or by callingloadQuery()
.
#
Flow Type ParametersTQuery
: Type parameter that should correspond to the Flow type for the specified query. This type is available to import from the the auto-generated file:<query_name>.graphql.js
.
#
Return Valuedata
: Object that contains data which has been read out from the Relay store; the object matches the shape of specified query.- The Flow type for data will also match this shape, and contain types derived from the GraphQL Schema. For example, the type of
data
above is:{ user: ?{ name: ?string } }
.
- The Flow type for data will also match this shape, and contain types derived from the GraphQL Schema. For example, the type of
Is this page useful?