useQueryRefHandlers

Apollo Client API reference


A React hook that returns a refetch and fetchMore function for a given queryRef.

This is useful to get access to handlers for a queryRef that was created by createQueryPreloader or when the handlers for a queryRef produced in a different component are inaccessible.

Example

TypeScript
1 const MyComponent({ queryRef }) {
2   const { refetch, fetchMore } = useQueryRefHandlers(queryRef);
3
4   // ...
5 }

Signature

TypeScript
1useQueryRefHandlers<TData, TVariables>(
2  queryRef: QueryRef<TData, TVariables, DataState<TData>["dataState"]>
3): useQueryRefHandlers.Result<TData, TVariables>
(src/react/hooks/useQueryRefHandlers.ts)

Parameters

Name / Type
Description
queryRef
QueryRef<TData, TVariables, DataState<TData>["dataState"]>

A QueryRef returned from useBackgroundQuery, useLoadableQuery, or createQueryPreloader.

Show/hide child attributes

Result

useQueryRefHandlers.Result<TData, TVariables>
Show/hide child attributes
FetchMoreFunction<TData, TVariables>

A function that helps you fetch the next set of results for a paginated list field.

RefetchFunction<TData, TVariables>

Update the variables of this observable query, and fetch the new results. This method should be preferred over setVariables in most use cases.

Returns a ResultPromise with an additional .retain() method. Calling .retain() keeps the network operation running even if the ObservableQuery no longer requires the result.

Note: refetch() guarantees that a value will be emitted from the observable, even if the result is deep equal to the previous value.

SubscribeToMoreFunction<TData, TVariables>

A function that enables you to execute a subscription, usually to subscribe to specific fields that were included in the query.

This function returns another function that you can call to terminate the subscription.