201React-Query:useQuery基本使用

官方文档：基本查询

---

一、基本参数

import { useQuery } from '@tanstack/react-query'

function App() {
  const info = useQuery({ queryKey: ['todos'], queryFn: fetchTodoList })
}

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

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

function Todos() {
  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 结构）

function Todos() {
  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: 缓存时间

更多查看官网参数