我是这个react-query库的新手。
我知道,当我想获取数据时,我可以使用这个库执行如下操作:
const fetchData = async()=>{...}
// it starts fetching data from backend with this line of code
const {status, data, error} = useQuery(myKey, fetchData());
它工作。但如何触发数据获取只有当一个按钮被点击?,我知道我可能会做一些像<Button onPress={() => {useQuery(myKey, fetchData())}}/>
,但如何管理返回的数据和状态...
8条答案
按热度按时间qxsslcnc1#
根据API Reference,您需要将
enabled
选项更改为false,以禁止自动运行查询。然后手动重新获取。工作沙盒here
额外的好处:你可以将任何返回布尔值的东西传递给
enabled
。这样你就可以创建Dependant/Serial查询了。gmol16392#
你必须传递
manual: true
参数选项,这样查询在装载时就不会获取。另外,你应该传递fetchData
而不带括号,这样你就传递了函数引用而不是值。要调用查询,你可以使用refetch()。有关更多信息,请参阅react-query文档中的手动查询部分https://github.com/tannerlinsley/react-query#manual-querying
yiytaume3#
看起来文档更改了,现在缺少了手动查询部分。但是查看useQuery API,您可能需要将
enabled
设置为false,然后在按下按钮时使用refetch
手动查询。您还可能需要使用force: true
使其查询而不考虑数据新鲜度。rnmwe5a24#
您可以尝试此版本:
来自文档Doc:
enabled: boolean
refetch: (options: { throwOnError: boolean, cancelRefetch: boolean }) => Promise<UseQueryResult>
throwOnError: true option
cancelRefetch
是true
,则在做出新请求之前,将取消当前请求vwhgwdsa5#
如果要触发多次重新获取,还有另一种方法可以实现此目的。
如果要重新获取多个实体,则可以有一个顶级useState,它被称为fetchAll示例,并且:
并且如果您按下按钮获取所有内容,也会触发此代码。
gajydyqb6#
首先,响应查询会提供启用选项,默认情况下为true
cwdobuhd7#
如果键相同,则使用refetch(),如果键不同,则使用useState触发查询。
例如:
yxyvkwin8#
您可以使用useLazyQuery()
参考:https://www.apollographql.com/docs/react/data/queries/#manual-execution-with-uselazyquery