API
React
useLazyQuery

useLazyQuery

A wrapper hook for the core function resolve, designed for users who want more control over when the query fetches.

export default function MyComponent() {
  const [loadData, { data, error, isCalled, isLoading }] = useLazyQuery(
    (query) => ({
      foo: query.foo,
      bar: query.bar({ baz: 1 }),
    })
  );
 
  return (
    <>
      {!isCalled && <Button onClick={loadData}>Load data</Button>}
      {isLoading && <Spinner />}
      {error && <ErrorMessage error={error} />}
      <div>
        <div>Foo: {data.foo}</div>
        <div>Bar: {data.bar}</div>
      </div>
    </>
  );
}

Options

onCompleted

Optional callback for when a query fetch is successful.

(data: TData) => void;

onError

Optional callback for when a query fetch fails.

(error: GQtyError) => void;

fetchPolicy

ValueDescription
cache-firstTranslates to the cache policy force-cache.
cache-and-networkTranslates to the cache policy default.
network-onlyTranslates to the cache policy no-cache.
no-cacheTranslates to the cache policy no-store.

Read more about Cache Policy.

operationName

Optional GraphQL operation name, useful for debugging and testing.

retry

Failing queries can be automatically retried, this option allows you to customize the retrying behavior, or disabling it altogether.

Retry PolicyDescription
trueEnables auto retry with the default options.
falseDisables auto retry.
numberEnables auto retry with the default options and a custom maxRetries count.
{ maxRetries, retryDelay }Enables auto retry with custom options.

When you specify retry as an object, the following properties are available.

maxRetries

The maximum number of times to retry a failed query, defaults to 3.

retryDelay

Retry DelayDescription
numberA fixed number of milliseconds to wait between retries.
(attempt: number) => numberA function that returns the number of milliseconds to wait between retries, the default is an exponential backoff function: min(2x,30)1000msmin({2^x}, 30) * 1000\text{ms}.

suspense

Use true to enable Suspense mode.

Return Value

TriggerFunction

The trigger function to start fetching for query data, you may override the query function, query variables, fetch policy or operation name in place.

Signature

function triggerFunction(options?: {
  fn?: QueryFunction;
  variables?: TVariables;
  fetchPolicy?: LegacyFetchPolicy;
  operationName?: string;
}): TData;

QueryState

data

The data returned by the query function, only available after a successful fetch.

error

The error returned by the query function, only available after a failed fetch.

isCalled

Whether the query function has been called.

isLoading

Whether the query function is currently fetching.