201React-Query:useQuery基本使用

官方文档：基本查询

一、基本参数

import{useQuery}from'@tanstack/react-query'functionApp(){constinfo=useQuery({queryKey:['todos'],queryFn:fetchTodoList})}

其中 info可以换成好几种参数比如：

方式一：使用布尔状态（最常用且清晰）

functionTodos(){const{isPending,isError,data,error}=useQuery({queryKey:['todos'],queryFn:fetchTodoList,})// 1. 处理加载中状态if(isPending){return<span>Loading...</span>}// 2. **推荐：使用 isError** 处理错误状态if(isError){return<span>Error:{error.message}</span>}// 3. 处理成功状态 (isSuccess 隐含为 true)return(<ul>{/* ... 渲染数据 */}</ul>)}

方式二：使用status字符串（适用于 switch 或 if/else if 结构）

functionTodos(){const{status,data,error}=useQuery({queryKey:['todos'],queryFn:fetchTodoList,})if(status==='pending'){return<span>Loading...</span>}// **推荐：使用 status === 'error'** 处理错误状态if(status==='error'){return<span>Error:{error.message}</span>}// status === 'success'return(<ul>{/* ... 渲染数据 */}</ul>)}

• 注意：error：是错误的信息（如果有）
• 错误的状态：是isError或者status来判断

二、扩展参数

1. retry：重试次数

2. refetch：

3. enabled：是否查询，后面可以用 !!value来指定条件

4.staleTime：新鲜值

5.gcTime: 缓存时间

更多查看官网参数