React-query：如果查询为空，如何避免触发函数调用？答案

【问题标题】：React-query: How to avoid triggering function call if query is empty?React-query：如果查询为空，如何避免触发函数调用？
【发布时间】：2020-06-03 15:10:28
【问题描述】：

我正在使用react-query 调用 API。该调用运行良好，每次在输入字段中更新查询值时都会执行该调用。
不幸的是，即使查询为空，它也会触发 API 调用。

例如，当用户加载应用程序时，输入（以及查询）将为空白。

如何仅在有查询时触发 API 调用？

代码

// API call
export async function myQuery(query) {
  try {
    const res = await ax.get("myapiurl", {
      params: { query },
    });
    return res.data;
  } catch {
    return null;
  }
}

// react-query
const { status, data } = useQuery(
  ["myquery", { query }],
  () => myQuery(query)
);

【问题讨论】：

标签： reactjs react-query

【解决方案1】：

你可以用一个简单的 if 语句来实现：

// apicall
export async function myQuery(query) {
  try {
    const res = await ax.get("myapiurl", {
      params: { query },
    });
    return res.data;
  } catch {
    return null;
  }
}

// react-query
  const { status, data } = useQuery(
    ["myquery", { query }],
    () => {
      if (query) {
        return myQuery(query)
      }
  );

【讨论】：

它不起作用，我仍然有加载器。另外，我尝试在 try/catch 块之前编写 if(!query){null} ，但是这样做时，react-query 保持永远加载。
我编辑了代码，请立即尝试。您可能希望删除 useQuery 回调中的唯一 return

【解决方案2】：

react-query 中有一个 enabled 标志用于这个确切的用例。

使用示例

const { status, data } = useQuery(
  ["myquery", { query }],
  () => myQuery(query).
  { enabled: !!query }
);

Docs for reference

【讨论】：

当refetch 方法被调用时，有没有办法阻止获取？反应查询？