Calling React hook in a function

April 22, 2022

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?

>Solution :

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}
  />
}