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

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

1 个答案: