React-Query学习及实践总结

---

前言

最近团队中用了react-query，了解了一下之后确实挺好玩的，简单记录一下

---

一、react-query能干嘛？

在前端平时的开发中，可以把我们需要维护的状态分为两类：

1. 用户交互的中间状态。如组件的状态，isLoading, isOpen
2. 服务端状态。通过请求得到并在前端维护

react-query能够更好的帮助我们处理第二类状态。服务端状态通常会存在组件中，如果要复用，要存在全局状态如redux中。但这样有两个问题：

1. 需要重复处理请求中间状态，比如loading，error的判断，每次都要写
2. 不同于交互的中间状态，服务端状态更应被归类为「缓存」，对于不同组件要共享的缓存，还要考虑「缓存」的失效和更新

而react-query可以无痛的完全替我们处理这些问题：

1. 在hooks内部封装loading，error等方便直接使用
2. 多个组件请求同一个query时只发出一个请求
3. 缓存数据失效/更新策略（判断缓存合适失效，失效后自动请求数据）

二、常见用例

1.引入库

代码如下（示例）：

import {
    useQuery } from 'react-query';

2.请求useQuery

代码如下（示例）：

  // 通过useQuery请求数据，hook返回的data和isLoding都可以直接使用
  // 除了data，isLoading，还有其他返回如 status，error，isFetching等等
  const {
    data, isLoading } = useQuery(
  	// useQuery的第一个参数：查询的唯一key，要求必须是可序列化的
    ['statData', {
    date, group }],
    // useQuery的第二个参数：查询函数，要求必须是返回Promise的函数
    // 在查询函数中，也可以提取到key中的参数，比如
    // const [_key, { date, department }] = queryKey;
    async () => {
   
      const {
    data: dataObj } = await fetchStatData({
   
        year: date.getFullYear(),
        month: date.getMonth(),
        deptId: group ? group.id : '',
      });
      return dataObj;
    },