how can I use useQuery to trigger some api call only when onClick happens?I have an application that need to trigger api call, useAPICall with query data only when clicking button and function onCheckingData is true. Other than using useState to save the state if it is needed to trigger api call. or any better way for me to use useQuery inside useCallBack?
function useAPICall(data, shouldRunQuery=false) => { const query = useQuery( [{query: apiGQL, variables: {...data}}], async () => { const response: {data} = await ucFetch(apiUrl, { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ query: apiUrl, variables: {...data}, }), }); return response; }, {enabled: shouldRunQuery} ); return query;}function onCheckingData(data){ //do some logic checkign on data // return boolean return true}export default function App() { const [shouldRunQuery, setShouldRunQuery] = useState(false) const onClickHandler = useCallBack((data)=>{ setShouldRunQuery(onCheckingData(data)) }, [data]) const {response} = useAPICall(data, shouldRunQuery) return (<div className="App"><button onClick={onClickHandler}>run query</button></div> );}