快速开始

安装

pnpm add @tanstack/react-query

同时，建议配合 ESLint 插件来帮助捕获编码时的错误：

pnpm add -D @tanstack/eslint-plugin-query

添加@tanstack/eslint-plugin-query到配置文件的插件部分：

{
  "plugins": ["@tanstack/query"]
}

然后在规则部分配置你想要使用的规则：

{
  "rules": {
    "@tanstack/query/exhaustive-deps": "error",
    "@tanstack/query/prefer-query-object-syntax": "error"
  }
}

推荐配置：为此插件启用所有推荐的规则，添加plugin:@tanstack/eslint-plugin-query/recommended扩展

{
    "extends": ["plugin:@tanstack/eslint-plugin-query/recommended"]
}

快速开始

React Query主要包含3个核心概念，这三个概念构成了React Query的大部分核心功能。

• 查询

• 突变

• 查询失效

import {
  useQuery,
  useMutation,
  useQueryClient,
  QueryClient,
  QueryClientProvider
} from "@tanstack/react-query"

// 创建client
const queryClient = new QueryClient()

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Todos/>
    </QueryClientProvider>
  )
}

function Todos() {
  // 访问client
  const queryClient = useQueryClient()

  // queries
  const query = useQuery({
    queryKey: ['todos'],
    queryFn: () => fetch('http://localhost:4000/api/get')
  })

  // 突变
  const mutations = useMutation({
    mutationFn: () => fetch("http://localhost:4000/api/post"),
    onSuccess: () => {
      // 重新获取最新数据
      queryClient.invalidateQueries({ queryKey: ['todos'] })
    }
  })

  return (
    <>
      <div>
        {JSON.stringify(query.data)}
      </div>
      <button onClick={() => mutations.mutate()}>
        Add Todo
      </button>
    </>
  )
}

上述代码片段展示了一个由查询、突变、查询失效