如何使用 React Query 只调用一次 API？

Question

我正在使用 React Query 制作访客呼叫系统。

我有一种调用（按钮），我只想在按下按钮时调用 api。然而，当组件被渲染时，它会不断调用 api。

1. 如何在渲染时不调用组件
2. 如何仅在按下按钮时调用api

我应该怎么办？

//App.jsx
const query = useQuery('resData', getEmployData('datas'), {
  enabled: false
  });

const callBtn = () => {
  query.refetch()
}


return (
  <ul>
    <li onClick ={callBtn}>Post</li>
    <li>Food</li>
    <li>Other</li>
  </ul>
)

这是api函数

const getEmployData = async(callKind) => {
    const {data} = await axios.get(`${baseUrl}/welcome?callKind=${callKind}`);

    return data
}

Answer 1

您可以通过使用staleTime: Infinity配置对象来实现这一点。请查看https://tanstack.com/query/v4/docs/react/guides/initial-query-data#staletime-and-initialdataupdatedat

您的代码应如下所示：

const query = useQuery('resData', getEmployData('datas'), {
  enabled: false,
  staleTime: Infinity
});

这将告诉反应查询该数据应被视为“新鲜”，默认情况下查询会立即标记为“陈旧”，并且在以下情况下会在后台自动重新获取“陈旧”查询：

• 查询挂载的新实例
• 窗口重新聚焦
• 网络已重新连接。
• 该查询可以选择配置重新获取间隔。

https://tanstack.com/query/v3/docs/react/guides/important-defaults