React Query 数据获取

在现代 Web 应用中，数据获取是一个核心功能。React Query 是一个强大的库，它简化了数据获取、缓存和同步的过程，使开发者能够更专注于构建用户界面。本文将带你了解 React Query 的基本概念，并通过实际案例展示如何使用它来管理数据。

什么是 React Query？

React Query 是一个用于 React 应用的数据获取库。它提供了一种简单的方式来管理服务器状态，包括数据获取、缓存、后台更新和错误处理。与传统的状态管理库（如 Redux）不同，React Query 专注于处理异步数据，使得开发者能够更轻松地处理 API 调用和数据同步。

安装 React Query

首先，你需要在项目中安装 React Query。你可以使用 npm 或 yarn 来安装它：

bash
npm install @tanstack/react-query

或者

bash
yarn add @tanstack/react-query

基本用法

配置 React Query

在使用 React Query 之前，你需要在应用的根组件中配置 QueryClient 和 QueryClientProvider。QueryClient 是 React Query 的核心，它负责管理查询和缓存。

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

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* 你的应用组件 */}
    </QueryClientProvider>
  );
}

使用 `useQuery` 获取数据

useQuery 是 React Query 中最常用的钩子之一。它用于从服务器获取数据，并自动处理加载状态、错误和缓存。

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

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

function Posts() {
  const { data, isLoading, error } = useQuery(['posts'], fetchPosts);

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

  return (
    <ul>
      {data.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

在这个例子中，useQuery 接收两个参数：一个唯一的查询键（['posts']）和一个用于获取数据的函数（fetchPosts）。useQuery 返回一个对象，其中包含 data、isLoading 和 error 等属性，用于处理数据加载状态和错误。

使用 `useMutation` 更新数据

除了获取数据，React Query 还提供了 useMutation 钩子，用于处理数据的更新操作（如创建、更新或删除）。

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

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

function AddPost() {
  const queryClient = useQueryClient();
  const mutation = useMutation(createPost, {
    onSuccess: () => {
      // 数据更新成功后，重新获取 posts 数据
      queryClient.invalidateQueries(['posts']);
    },
  });

  const handleSubmit = (event) => {
    event.preventDefault();
    const formData = new FormData(event.target);
    const newPost = { title: formData.get('title'), body: formData.get('body') };
    mutation.mutate(newPost);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="title" placeholder="Title" />
      <textarea name="body" placeholder="Body" />
      <button type="submit">Add Post</button>
    </form>
  );
}

在这个例子中，useMutation 用于创建一个新的帖子。当数据更新成功后，onSuccess 回调函数会触发 queryClient.invalidateQueries(['posts'])，这将使 posts 查询失效并重新获取数据。

实际案例

假设你正在构建一个博客应用，你需要从服务器获取博客文章列表，并允许用户添加新的文章。使用 React Query，你可以轻松实现这些功能。

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

const queryClient = new QueryClient();

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

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

function Posts() {
  const { data, isLoading, error } = useQuery(['posts'], fetchPosts);

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

  return (
    <ul>
      {data.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

function AddPost() {
  const queryClient = useQueryClient();
  const mutation = useMutation(createPost, {
    onSuccess: () => {
      queryClient.invalidateQueries(['posts']);
    },
  });

  const handleSubmit = (event) => {
    event.preventDefault();
    const formData = new FormData(event.target);
    const newPost = { title: formData.get('title'), body: formData.get('body') };
    mutation.mutate(newPost);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="title" placeholder="Title" />
      <textarea name="body" placeholder="Body" />
      <button type="submit">Add Post</button>
    </form>
  );
}

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <AddPost />
      <Posts />
    </QueryClientProvider>
  );
}

export default App;

在这个案例中，Posts 组件使用 useQuery 获取并显示博客文章列表，而 AddPost 组件使用 useMutation 添加新的文章。当新文章添加成功后，Posts 组件会自动重新获取数据并更新 UI。

总结

React Query 是一个强大的工具，它简化了 React 应用中的数据获取和管理。通过使用 useQuery 和 useMutation，你可以轻松处理数据的加载、缓存和更新。本文介绍了 React Query 的基本用法，并通过一个实际案例展示了如何在实际项目中使用它。

附加资源

练习

尝试在现有的 React 项目中集成 React Query，并使用 useQuery 获取数据。
使用 useMutation 实现一个表单，允许用户提交数据并更新服务器状态。
探索 React Query 的其他功能，如分页查询、无限滚动查询等。

通过实践这些练习，你将更深入地理解 React Query 的工作原理，并能够在实际项目中灵活运用它。

什么是 React Query？​

安装 React Query​

基本用法​

配置 React Query​

使用 useQuery 获取数据​

使用 useMutation 更新数据​

实际案例​

总结​

附加资源​

练习​