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

Question

我正在使用 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)
);

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

Answer 2

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

使用示例

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

Docs for reference

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

React-query: How to avoid triggering function call if query is empty?

reactjs

react-query