我如何有条件地从react-query调用`useQuery`

Question

我有 3 个函数

shouldCallApi

返回 true 或 false 来决定

useApiCall

是否应该触发 如果是，

useSecondApiCall

将返回一些数据并传递到

useApiCall

的查询中以构建其查询，然后返回响应 我在组件级别调用

useApiCall

没问题，但是如何确保

useApiCall

仅在

shouldCallApi

返回 true 时触发？

export function shouldCallApi(): boolean {
  ...
}

export function useApiCall(
  parameter, 
  shouldExecuteQuery = true
  ) {
  const [query] = useDebounce(parameter, 350);
  const {data} = useSecondApiCall(query);
  const {totalNumber} = data?.number || {};
   
   const query = useQuery<APIhCreateMutation, Error>(
     [{query: apihCreateGQL, variables: {...query, count: totalNumber}}],
     async () => {
       const result: APIhCreateMutation= await ucFetch(apiUrl, {
         method: 'POST',
         headers: {'Content-Type': 'application/json'},
         body: JSON.stringify({
           query: apiCreateGQL,
           variables: {...query, count: totalNumber},
         }),
       });
       return result;
     },
     {refetchOnWindowFocus: false, enabled: shouldExecuteQuery, keepPreviousData: true}
   );
   return query;
}
export default function App() {
const query = useSelector((state) => state.query);
 const {response} =useApiCall(query) 
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Edit to see some magic happen!</h2>
    </div>
  );
}

Answer 1

如何确保 useApiCall 仅在 shouldCallApi 返回 true 时触发？

这就是

enabled

选项的用途，您已经在示例中使用了该选项 - 但我不清楚

shouldExecuteQuery

和

shouldCallApi

如何一起发挥作用？

只要启用

false

，查询就会“暂停”。如果您还没有数据，它将处于

idle

状态。当启用从

false

到

true

的转换时，将触发自动重新获取。

所以真的，这只是：

useQuery(queryKey, queryFn, { enabled: shouldCallApi() });