安装和使用 TanStack Query（以前称为 React Query）

TanStack 查询简介

TanStack Query（以前称为 React Query）是一个强大的库，用于管理 React 应用程序中的数据请求状态。 简化高效获取、缓存、同步和更新数据的过程。

安装

要将 TanStack Query 集成到您的 React 项目中，请使用 npm 或 Yarn：

npm install @tanstack/react-query

或

yarn add @tanstack/react-query

要使用开发工具 (DevTools)，请安装：

npm install @tanstack/react-query-devtools

设置

使用 QueryClientProvider 包装您的应用来管理数据请求：

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <MyComponent />
      {/* Opcional: Si instalaste DevTools */}
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}

与useQuery

的基本使用

useQuery 钩子可以轻松地从 API 获取数据：

import { useQuery } from '@tanstack/react-query';

function fetchData() {
  return fetch('https://jsonplaceholder.typicode.com/posts/1')
    .then(response => response.json());
}

function MyComponent() {
  const { data, isLoading, error } = useQuery({ queryKey: ['post'], queryFn: fetchData });

  if (isLoading) return <p>Cargando...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.body}</p>
    </div>
  );
}

使用 useMutation

执行突变

要执行 POST、PUT 或 DELETE 等操作，请使用 useMutation:

import { useMutation } from '@tanstack/react-query';

function createPost(newPost) {
  return fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(newPost),
  }).then(response => response.json());
}

function CreatePost() {
  const mutation = useMutation(createPost);

  return (
    <button onClick={() => mutation.mutate({ title: 'Nuevo Post', body: 'Contenido del post' })}>
      Crear Post
    </button>
  );
}

Fetcher 在 TanStack 查询中的重要性

TanStack Query 需要一个 fetcher（向数据源发出请求的函数）来获取外部信息。 获取器充当中介，提供灵活性并保持代码整洁。 您可以自定义它以适合您的 API。

什么是抓取器？

获取器是一个函数：

1. 接收参数（请求选项等）。
2. 提出请求（使用fetch、axios等）。
3. 返回带有数据或错误的承诺。

获取示例：

const fetchPosts = async () => {
  const response = await fetch('/api/posts');
  const json = await response.json();
  return json;
};

结论

TanStack Query 优化了 React 中的数据管理，通过其缓存和重新验证系统提高了性能。 再见！ ？

以上是安装和使用 TanStack Query（以前称为 React Query）的详细内容。更多信息请关注PHP中文网其他相关文章！