快速入门 | TanStack Query React Docs

快速入门

此代码片段非常简要地说明了 React Query 的 3 个核心概念：

如果您正在寻找一个功能齐全的示例，请查看我们的简单 StackBlitz 示例

tsx

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

// 创建一个客户端
const queryClient = new QueryClient()

function App() {
  return (
    // 为您的应用提供客户端
    <QueryClientProvider client={queryClient}>
      <Todos />
    </QueryClientProvider>
  )
}

function Todos() {
  // 访问客户端
  const queryClient = useQueryClient()

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

  // 变更
  const mutation = useMutation({
    mutationFn: postTodo,
    onSuccess: () => {
      // 使其失效并重新获取
      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: '洗衣服',
          })
        }}
      >
        添加待办事项
      </button>
    </div>
  )
}

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

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

// 创建一个客户端
const queryClient = new QueryClient()

function App() {
  return (
    // ���您的应用提供客户端
    <QueryClientProvider client={queryClient}>
      <Todos />
    </QueryClientProvider>
  )
}

function Todos() {
  // 访问客户端
  const queryClient = useQueryClient()

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

  // 变更
  const mutation = useMutation({
    mutationFn: postTodo,
    onSuccess: () => {
      // 使其失效并重新获取
      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: '洗衣服',
          })
        }}
      >
        添加待办事项
      </button>
    </div>
  )
}

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

这三个概念构成了 React Query 的大部分核心功能。文档的后续部分将详细介绍这些核心概念中的每一个。