react|react简单入门--常用hook中useQuery(react-query)的使用

前言:
在项目中,我们往往需要香后端发起请求,而在函数组件中,如果直接用axios或者fetch的话,拿到的数据要渲染到UI上,往往是不方便的,所以需要引入react-query,来满足我们增删改查的基本操作
一、查数据:
1、导包
react|react简单入门--常用hook中useQuery(react-query)的使用
文章图片

2、用包中的QueryClientProvider组件包裹住整个App组件,并提供一个client
react|react简单入门--常用hook中useQuery(react-query)的使用
文章图片

home组件:
就直接使用useQusery方法即可。
react|react简单入门--常用hook中useQuery(react-query)的使用
文章图片

useQusery说明:

  • 参数一:是一个id,你随便取,但是要唯一,这个唯一键值将在内部用于在整个程序中重新获取数据、缓存和共享查询。
  • 参数二:是一个一个返回 Promise 的函数
接下来我们看一下打印的response结果吧:
react|react简单入门--常用hook中useQuery(react-query)的使用
文章图片

我们再把两个都展开吧
react|react简单入门--常用hook中useQuery(react-query)的使用
文章图片

【react|react简单入门--常用hook中useQuery(react-query)的使用】response对象包含一些非常重要的状态,您需要注意这些状态才能提高工作效率。 在任何给定时刻,查询只能处于以下状态之一:
  • isLoading 或者 status === ‘loading’ - 查询没有数据,正在获取结果中
  • isError 或者 status === ‘error’ - 查询遇到一个错误
  • isSuccess 或者 status === ‘success’ - 查询成功,并且数据可用
  • isIdle 或者 status === ‘idle’ - 查询处于禁用状态
除了这些主要状态之外,取决于具体查询的状态,还有更多信息可用:
  • error - 如果查询处于isError状态,则可以通过error属性获取该错误
  • data - 如果查询处于success状态,则可以通过data属性获得数据
  • isFetching - 在其他任何状态下,如果查询在获取中(包括后台重新获取数据),则isFetching为true
二、增、删、改数据
react|react简单入门--常用hook中useQuery(react-query)的使用
文章图片

网络请求:
react|react简单入门--常用hook中useQuery(react-query)的使用
文章图片

    推荐阅读