Is there a chance I can run a query with a useQuery hook only if the button is clicked?
const handleClick = () => {
const [, { data }] = useLazyQuery(GET_ORDER_INVOICE, {
variables: { order_Id: orderNumber }
});
return '';
};
<Button
priority={ButtonPriority.SECONDARY}
onClick={ () => {
handleClick();
} }
/>
However, this breaks with the React Hook "useLazyQuery" is called in function "handleClick" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. Is there a chance I can bind calling a query to a button click?
You need to call useLazyQuery in the body of your component. It will then return to you a function that you can call in handleClick:
const Example = () => {
const [executeQuery, { data }] = useLazyQuery(GET_ORDER_INVOICE);
const handleClick = () => {
executeQuery({
variables: { order_Id: orderNumber }
})
}
// ...
<Button
priority={ButtonPriority.SECONDARY}
onClick={handleClick}
/>
}