Question

我正在使用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请求。因此，我的加载指示器会显示何时没有实际的网络活动。

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

Answer 1

关键是要使用Dependant Queries

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

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选项可以接受任何布尔值。在这种情况下-如果搜索查询字符串足够长。

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

1 个答案: