Skip to main content

UseLazyQuery

useLazyQuery

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

Example

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

parameter
DocumentNode | TypedDocumentNode<T, V>

options

parameter
{ refetchOnChannelChange: boolean }