Skip to main content

UseLazyQuery

A React hook which allows you to execute a GraphQL query lazily.

Example

Ts
import { useLazyQuery } from '@vendure/admin-ui/react';import { gql } from 'graphql-tag';const GET_PRODUCT = gql`   query GetProduct($id: ID!) {     product(id: $id) {       id       name       description     }   }`;type ProductResponse = {    product: {        name: string        description: string    }}export const MyComponent = () => {    const [getProduct, { data, loading, error }] = useLazyQuery<ProductResponse>(GET_PRODUCT, { refetchOnChannelChange: true });   const handleClick = () => {        getProduct({             id: '1',        }).then(result => {            // do something with the result        });    };    if (loading) return <div>Loading...</div>;    if (error) return <div>Error! { error }</div>;    return (    <div>        <button onClick={handleClick}>Get product</button>        {data && (             <div>                 <h1>{data.product.name}</h1>                 <p>{data.product.description}</p>             </div>)}    </div>    );};
Signature
function useLazyQuery<T, V extends Record<string, any> = Record<string, any>>(query: DocumentNode | TypedDocumentNode<T, V>, options: { refetchOnChannelChange: boolean } = { refetchOnChannelChange: false }): void

Parameters

query

parameterDocumentNode | TypedDocumentNode<T, V>

options

parameter{ refetchOnChannelChange: boolean }
Was this chapter helpful?
Report Issue
Edited Feb 2, 2026·Edit this page