查询

查询可以与任何基于 Promise 的方法（包括 GET 和 POST 方法）一起使用以从服务器获取数据。如果你的方法修改了服务器上的数据，建议改用Mutations。

interface Response {
  message: string,
  time: string,
  ipv4: string
}

function Todos() {
  const { data, isLoading, error } = useQuery<Response>({
    queryKey: ['queryTodos'],
    queryFn: () => fetch('http://114.116.113.117:4000/api/get').then(res => res.json())
  })
  return (
    <div>
      {error ? 'Error' : <p>ipv4: {data?.ipv4}</p>}
    </div>
  )
}

• queryKey：提供的唯一键，在内部用于重新获取、缓存和在整个应用程序中共享查询。

useQuery 的返回值包含如下几个状态，通过这些状态我们可以渲染出不同的UI。

1. isLoading 或 status==="loading"：正在查询中。

2. isError 或 status==="error"：查询遇到错误。

3. isSuccess 或者 status==="success"：查询成功。

除了这些主要的查询状态之外，我们还可以获取到 error 和 data 属性。

1. error：如果查询处于某个 isError 状态，则错误可通过 error 属性获得。

2. data：如果查询处于某个 isSuccess 状态，则数据可以通过 data 属性获得。

另外，除了 status 字段之外，我们还可以获得 fetchStatus：

1. fetchStatus==="fetching"：正在获取数据。

2. fetchStatus==="paused"：查询想要获取数据，但是已经暂停。在网络模式指南中阅读更多相关信息。
3. fetchStatus==="idle"：目前处于空闲状态。

success 状态下，查询处于 idle 状态，但如果正在后台进行重新获取，它也可能处于fetching 状态。

在没有网络的情况下，查询处于加载状态并且 fetchStatus 处于 paused 状态。