useLoadableQuery
Apollo Client API reference
A hook for imperatively loading a query, such as responding to a user interaction.
Refer to the Suspense - Fetching in response to user interaction section for a more in-depth overview of
useLoadableQuery.
Example
JavaScript
1 import { gql, useLoadableQuery } from "@apollo/client";
2
3 const GET_GREETING = gql`
4 query GetGreeting($language: String!) {
5 greeting(language: $language) {
6 message
7 }
8 }
9 `;
10
11 function App() {
12 const [loadGreeting, queryRef] = useLoadableQuery(GET_GREETING);
13
14 return (
15 <>
16 <button onClick={() => loadGreeting({ language: "english" })}>
17 Load greeting
18 </button>
19 <Suspense fallback={<div>Loading...</div>}>
20 {queryRef && <Hello queryRef={queryRef} />}
21 </Suspense>
22 </>
23 );
24 }
25
26 function Hello({ queryRef }) {
27 const { data } = useReadQuery(queryRef);
28
29 return <div>{data.greeting.message}</div>;
30 }Signature
TypeScript
1useLoadableQuery<TData, TVariables>(
2 query: DocumentNode | TypedDocumentNode<TData, TVariables>,
3 options: useLoadableQuery.Options
4): useLoadableQuery.Result<TData, TVariables>Parameters
Name / Type
Description
A GraphQL query document parsed into an AST by gql.
Options to control how the query is executed.
Result
TypeScript
1[
2 loadQuery: LoadQueryFunction<TVariables>,
3 queryRef: QueryRef<TData, TVariables> | null,
4 {
5 fetchMore: FetchMoreFunction<TData, TVariables>;
6 refetch: RefetchFunction<TData, TVariables>;
7 subscribeToMore: SubscribeToMoreFunction<TData, TVariables>;
8 reset: ResetFunction;
9 }
10]Name / Type
Description
loadQueryLoadQueryFunction<TVariables>A function used to imperatively load a query. Calling this function will create or update the
queryRef returned by useLoadableQuery, which should be passed to useReadQuery.queryRefQueryRef<TData, TVariables> | nullThe
queryRef used by useReadQuery to read the query result.handlers{ fetchMore: FetchMoreFunction<TData, TVariables>; refetch: RefetchFunction<TData, TVariables>; subscribeToMore: SubscribeToMoreFunction<TData, TVariables>; reset: ResetFunction; }Additional handlers used for the query, such as
refetch.