Skip to main content

UseQuery

A React hook which provides access to the results of a GraphQL query.

Example

Ts
import { useQuery } from '@vendure/admin-ui/react';import { gql } from 'graphql-tag';const GET_PRODUCT = gql`   query GetProduct($id: ID!) {     product(id: $id) {       id       name       description     }   }`;export const MyComponent = () => {    const { data, loading, error } = useQuery(GET_PRODUCT, { id: '1' }, { refetchOnChannelChange: true });    if (loading) return <div>Loading...</div>;    if (error) return <div>Error! { error }</div>;    return (        <div>            <h1>{data.product.name}</h1>            <p>{data.product.description}</p>        </div>    );};
Signature
function useQuery<T, V extends Record<string, any> = Record<string, any>>(query: DocumentNode | TypedDocumentNode<T, V>, variables?: V, options: { refetchOnChannelChange: boolean } = { refetchOnChannelChange: false }): void

Parameters

query

parameterDocumentNode | TypedDocumentNode<T, V>

variables

parameterV

options

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