react query的使用

前言

新项目用到了react query所以记录一下。

首先来弄清楚这是干嘛的，适用于在客户端应用中管理服务端状态的库。

客户端状态：用于控制客户端UI的展示，储存在客户端，
服务端状态：客户端通过向服务端发起异步请求获得的数据，储存在服务端。

使用步骤

参考reactquery网站：https://cangsdarm.github.io/react-query-web-i18n/react/getstarted/quick-start

一、 发送请求(useQuery,useMutation)

1.1.1、使用useQuery

useQuery（参数一：唯一值key，参数二：promise,参数三：options依赖项），返回一个Object。
useQuery用来查询数据，获取数据。可以说是类似get请求。
唯一键值key将在内部用于重新获取数据、缓存和在整个程序中共享该查询信息。
当这个唯一键值是一个含有多个元素的数组时，这个数组里的元素就是描述这条数据的信息

关于option选项：

• staleTime 重新获取数据的时间间隔 默认0
• cacheTime 数据缓存时间 默认 1000 60 5 5分钟
• retry 失败重试次数 默认 3次
• refetchOnWindowFocus 窗口重新获得焦点时重新获取数据 默认 false
• refetchOnReconnect 网络重新链接
• refetchOnMount 实例重新挂载
• enabled 如果为“false”的化，“useQuery”不会触发，

import { useQuery } from "react-query";
const {isLoading, isError, data, error} = useQuery("key",()=>axios.get())

useQuery({ queryKey: ['todo', 5, { preview: true }], ...});

1.1.2、使用并行查询

React Query 提供了useQueries的 Hook,可以用来进行并行查询。

function App({ users }) {
  const userQueries = useQueries({
    queries: users.map((user) => {
      return {
        queryKey: ["user", user.id],
        queryFn: () => fetchUserById(user.id),
      };
    }),
  });
}

1.1.3、 useQuery传递参数

function Todos({ completed }) {
    // useQuery(['todo', { status: 1, page: 1 }], ...)  queryKey === ['todo', { status: 1, page: 1 }]
    // 传递参数给“fetchTodoList”使用
   const queryInfo = useQuery(['todos', { status: 1, page: 1 }], fetchTodoList)
 }

 // 函数参数
 // key -> “todos”
 // status -> 1 page -> 1
 function fetchTodoList(key, { status, page }) {
   return new Promise()
   // ...
 }

2、使用useMutation

useMutation
修改通常意味着用于创建/更新/删除数据或执行服务器命令，理解为POST，PUT等命令。

使用示例

import { useMutation } from "react-query";
const mutation = useMutation((data)=>axios.post(url,data),{onSuccess:()=>{}})

2.1.1、useMutation传递参数

3、主动查询失效（可重新刷新数据）Query Invalidation

如果用户在短暂离开后回来时，数据已被标记为过时，那么 React Query 会在后台自动为你请求新的数据。 你可以使用refetchOnWindowFocus选项在全局或单个查询中禁用此选项。

二、滞后查询数据(分页数据)