如何仅在 onClick 发生时使用`useQuery`触发api调用？

Question

如何使用useQuery 仅在 onClick 发生时触发一些 api 调用？ 我有一个需要触发 api 调用的应用程序，useAPICall 仅在单击按钮和功能onCheckingData 为真时才带有查询数据。除了在需要触发 api 调用时使用useState 来保存状态。或者有什么更好的方法让我在 useCallBack 中使用useQuery？

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>
  );
}

Answer 1

这应该可以工作

const [response, setResponse] = useState({})
const onClickHandler = useCallBack((data)=>{
  if (onCheckingData(data)) {
    const { response } = useAPICall(data)
    setResponse(response)
  }
}, [data])