使用 React-Query 挂钩有条件地调用 API答案

【问题标题】：Conditionally calling an API using React-Query hook使用 React-Query 挂钩有条件地调用 API
【发布时间】：2020-08-13 14:41:41
【问题描述】：

我正在使用 react-query 进行 API 调用，在这种问题情况下，我只想在满足某些条件时调用 API。

我有一个输入框，用户可以在其中输入搜索查询。当输入值改变时，搜索服务器会被调用，输入的内容作为搜索查询......但前提是输入值的长度超过 3 个字符。

在我调用的 react 组件中：

const {data, isLoading} = useQuery(['search', searchString], getSearchResults);

我的 getSearchResults 函数将有条件地进行 API 调用。

const getSearchResults = async (_, searchString) => {
    if (searchString.length < 3)
        return {data: []}

    const {data}  = await axios.get(`/search?q=${searchString}`)
    return data;
}

我们不能在条件中使用挂钩 - 所以我将条件放入我的 API 调用函数中。

这几乎可行。如果我输入一个简短的查询字符串，则不会发出 API 请求，并且我会为 data 返回一个空数组。耶！

但是 - isLoading 将短暂转换为 true - 即使没有发出 HTTP 请求。所以当没有实际的网络活动时，我的加载指示器会显示。

我是否误解了如何最好地解决我的用例，有没有办法确保如果没有 HTTP 活动，isLoading 将返回 false？

【问题讨论】：

标签： reactjs react-query

【解决方案1】：

关键是使用Dependent Queries

因此，在我的主要组件中，我创建了一个布尔值并将其传递给 useQuery 钩子的 enabled 选项：

const isLongEnough = searchString.length < 3;
const {data, isLoading} = useQuery(['search', searchString], getSearchResults, {enabled: isLongEnough});

API 调用方法只是 API 调用 - 没有任何条件：

const getSearchResults = async (_, searchString) => {
    const {data} = await axios.get(`/search?q=${searchString}`);
    return data;
}

文档将依赖查询描述为从后续 API 端点加载数据的解决方案，但 enable 选项可以接受任何布尔值。在这种情况下 - 如果搜索查询字符串足够长。

【讨论】：