Calling React hook in a function-CodePudding

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?

CodePudding user response：

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

CodePudding user response：

@Aleksandrs useQuery() get call on component render but sometimes we don't want to call query on component render instead our parameters get ready after component render and those parameter we want to pass as our requirements so in that case useLazyQuery will be useful.

In short useLazyQuery will not be called on component render.

For more details or example you can visit this link : https://www.apollographql.com/docs/react/api/react/hooks/#uselazyquery