跳到主要内容

Next.js React Query

在现代 Web 开发中，数据获取和管理是一个至关重要的部分。Next.js 提供了多种数据获取方式，而 React Query 则是一个强大的库，能够帮助我们更高效地管理数据。本文将介绍如何在 Next.js 中使用 React Query，并通过实际案例展示其应用。

什么是 React Query？​

React Query 是一个用于管理服务器状态和数据获取的库。它提供了一种简单而强大的方式来管理异步数据，包括缓存、后台更新、数据同步等功能。React Query 的核心思想是将数据获取与组件状态分离，使得数据管理更加清晰和高效。

安装 React Query​

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

bash
npm install @tanstack/react-query

或者

bash
yarn add @tanstack/react-query

配置 React Query​

在 Next.js 中使用 React Query 之前，我们需要进行一些配置。首先，在 _app.js 或 _app.tsx 文件中，我们需要将 React Query 的 QueryClientProvider 包裹在应用的根组件上。

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

const queryClient = new QueryClient();

function MyApp({ Component, pageProps }) {
  return (
    <QueryClientProvider client={queryClient}>
      <Component {...pageProps} />
    </QueryClientProvider>
  );
}

export default MyApp;

基本用法​

接下来，我们将通过一个简单的例子来展示如何使用 React Query 获取数据。假设我们有一个 API 端点 /api/posts，它返回一个帖子列表。

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

function Posts() {
  const { data, error, isLoading } = useQuery('posts', async () => {
    const response = await fetch('/api/posts');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  });

  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>
  );
}

export default Posts;

在这个例子中，我们使用了 useQuery 钩子来获取数据。useQuery 接受一个唯一的键（在这个例子中是 'posts'）和一个异步函数，该函数返回一个 Promise。React Query 会自动处理数据的缓存、后台更新和错误处理。

实际应用场景​

分页数据获取​

在实际应用中，我们经常需要处理分页数据。React Query 提供了 useInfiniteQuery 钩子来处理这种情况。

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

function Posts() {
  const {
    data,
    error,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
    isLoading,
  } = useInfiniteQuery(
    'posts',
    async ({ pageParam = 1 }) => {
      const response = await fetch(`/api/posts?page=${pageParam}`);
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.json();
    },
    {
      getNextPageParam: (lastPage, allPages) => lastPage.nextPage,
    }
  );

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

  return (
    <>
      <ul>
        {data.pages.map((page, i) => (
          <React.Fragment key={i}>
            {page.posts.map(post => (
              <li key={post.id}>{post.title}</li>
            ))}
          </React.Fragment>
        ))}
      </ul>
      <button
        onClick={() => fetchNextPage()}
        disabled={!hasNextPage || isFetchingNextPage}
      >
        {isFetchingNextPage ? 'Loading more...' : 'Load More'}
      </button>
    </>
  );
}

export default Posts;

在这个例子中，我们使用了 useInfiniteQuery 来获取分页数据。getNextPageParam 函数用于确定下一页的参数，fetchNextPage 函数用于加载更多数据。

总结​

React Query 是一个强大的工具，能够帮助我们更高效地管理数据获取和状态。通过本文的介绍，你应该已经掌握了如何在 Next.js 中使用 React Query 进行数据获取和管理。希望这些知识能够帮助你在实际项目中更好地应用 React Query。

附加资源​

练习​

  1. 尝试在 Next.js 项目中使用 React Query 获取一个简单的 API 数据，并显示在页面上。
  2. 修改上面的分页数据获取示例，使其支持无限滚动加载。
  3. 探索 React Query 的其他功能，如数据预取、缓存失效等，并在项目中应用。
提示

如果你在使用 React Query 时遇到问题，可以查阅官方文档或在社区中寻求帮助。React Query 的社区非常活跃，你一定能找到解决方案。