1.简介

• v4官网
• 简单的说就是一个管理请求的库，不是axios那种处理请求的工具，而是管理请求状态、请求数据等等，所有关于异步数据获取的工具。不同于一般的工具，由于整个状态的维护类似于redux，所以你甚至可以用来管理其他状态，可以说可以代替很多工具，具体可以看官网的介绍

2.安装

2.1. 首先不要搞错版本

我一开始就装yarn add react-query，然后我发现明明有4.0版本为什么装不上呢，后来查到作者把4.0和3.0分成了两个仓库维护，所以安装4.0需要安装的是这个库yarn add @tanstack/react-query

3.主要API

官网的第一个例子就很简单列出了主要API

import {
  useQuery,
  useMutation,
  useQueryClient,
  QueryClient,
  QueryClientProvider,
} from '@tanstack/react-query'
import { getTodos, postTodo } from '../my-api'


/**
* 创建查询客户端实例
* 里面可以传参数，具体参数后面讲
* 相当于全局配置
**/
const queryClient = new QueryClient()


function App() {
  return (
    // 在需要的地方放上Provide
    <QueryClientProvider client={queryClient}>
      <Todos />
    </QueryClientProvider>
  )
}


function Todos() {
  // 获取客户端实例
  const queryClient = useQueryClient()


  // 重要api1： 查询
  const query = useQuery({ queryKey: ['todos'], queryFn: getTodos })


  // 重要api2： 修改。除了查询操作最好都使用Mutation
  const mutation = useMutation({
    mutationFn: postTodo,
    onSuccess: () => {
      // Invalidate and refetch
      queryClient.invalidateQueries({ queryKey: ['todos'] })
    },
  })


  return (
    <div>
      <ul>
        {query.data?.map((todo) => (
          <li key={todo.id}>{todo.title}</li>
        ))}
      </ul>


      <button
        onClick={() => {
          mutation.mutate({
            id: Date.now(),
            title: 'Do Laundry',
          })
        }}
      >
        Add Todo
      </button>
    </div>
  )
}


render(<App />, document.getElementById('root'))