Frontend Academy · 课时

使用 SWR 和 React Query 缓存数据

使用 SWR 或 TanStack Query 获取、缓存、去重和重新验证服务器数据，替代手动编写的 useEffect 获取数据模式。

使用 SWR 和 React Query 缓存数据 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

服务器状态有所不同

网络数据并不只是普通状态。它需要缓存、去重、后台刷新、加载和错误跟踪以及重试。手动使用 useEffect 加 useState 的获取数据模式很难正确实现这些功能。

SWR 与 TanStack Query

SWR（Vercel）：体积小、简单，并且只提供钩子。TanStack Query（以前称为 React Query）：体积更大，功能更多（变更操作、无限查询、预取和开发者工具）。两者都非常优秀。

SWR——基本用法

useSWR(key, fetcher) 会返回数据、错误和加载状态。数据按键缓存，并在多个组件之间去重。

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then(r => r.json());

function Profile() {
  const { data, error, isLoading } = useSWR('/api/me', fetcher);

  if (error) return <ErrorMessage error={error} />;
  if (isLoading) return <Spinner />;
  return <h1>{data.name}</h1>;
}

SWR——重新验证行为

默认情况下，SWR 会在 focus（标签页重新获得焦点）时以及重新连接时重新验证。它会立即返回缓存值（“已过期”），并在后台更新（“重新验证期间”）。

SWR——变更

mutate(key) 会重新验证缓存的查询。将新数据作为第二个参数传入，即可执行乐观更新。

import useSWR, { mutate } from 'swr';

async function updateProfile(updates) {
  // Optimistic update — UI reflects change immediately
  mutate('/api/me', { ...currentData, ...updates }, false);
  await fetch('/api/me', { method: 'PUT', body: JSON.stringify(updates) });
  // Revalidate to get the server's canonical state
  mutate('/api/me');
}

TanStack Query——设置

请使用配置好的 QueryClientProvider 和 QueryClient 包裹应用。

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

const client = new QueryClient({
  defaultOptions: {
    queries: { staleTime: 30000, retry: 2 }
  }
});

function App() {
  return (
    <QueryClientProvider client={client}>
      <Routes />
    </QueryClientProvider>
  );
}

useQuery

useQuery({ queryKey, queryFn }) 会获取并缓存数据。

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

function UserList() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['users'],
    queryFn: () => fetch('/api/users').then(r => r.json()),
    staleTime: 60_000 // fresh for 1 minute
  });

  if (isLoading) return <Spinner />;
  if (error) return <ErrorMessage error={error} />;
  return <ul>{data.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

使用 useMutation 执行写入

useMutation 通过内置的 pending 和错误状态处理 POST/PUT/DELETE，并提供 onSuccess 钩子来使缓存失效。

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

function CreateUserForm() {
  const qc = useQueryClient();
  const m = useMutation({
    mutationFn: (user) => fetch('/api/users', { method: 'POST', body: JSON.stringify(user) }),
    onSuccess: () => qc.invalidateQueries({ queryKey: ['users'] })
  });

  return <button onClick={() => m.mutate({ name: 'Alice' })} disabled={m.isPending}>Create</button>;
}

使查询失效

变更操作完成后，请使相关查询失效，以触发重新获取。queryClient.invalidateQueries({ queryKey: ['users'] }) 会将它们标记为过期，并在查询已挂载时重新获取。

乐观更新

TanStack Query 通过 onMutate、onError 和 onSettled 提供完善的乐观更新支持。

useMutation({
  mutationFn: updateUser,
  onMutate: async (newUser) => {
    await qc.cancelQueries({ queryKey: ['user', newUser.id] });
    const previous = qc.getQueryData(['user', newUser.id]);
    qc.setQueryData(['user', newUser.id], newUser);
    return { previous };
  },
  onError: (_, newUser, ctx) => {
    qc.setQueryData(['user', newUser.id], ctx.previous); // rollback
  },
  onSettled: (_, __, newUser) => {
    qc.invalidateQueries({ queryKey: ['user', newUser.id] });
  }
});

无限查询

useInfiniteQuery 可处理分页列表和无限滚动列表，会提供 fetchNextPage，并跟踪所有已加载的页面。

React Query 开发者工具

添加 @tanstack/react-query-devtools，即可获得一个浮动面板，用于显示所有缓存的查询及其状态，并允许您手动使查询失效。

快速检查

与手动使用 useEffect 加 fetch 相比，使用 SWR 或 TanStack Query 的主要好处是什么？

回顾：SWR 与 React Query

服务器状态需要缓存、去重和重新验证。SWR 体积小且简单。TanStack Query 功能更多（变更操作、无限查询和开发者工具）。使用 useQuery 读取数据，使用 useMutation 写入数据。变更操作后使用 invalidateQueries。使用 onMutate/onError 执行乐观更新。在生产应用中，两者都可以替代手动的 useEffect 加 fetch。

常见问题解答

「使用 SWR 和 React Query 缓存数据」课时是免费的吗？

是的 — 「使用 SWR 和 React Query 缓存数据」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「使用 SWR 和 React Query 缓存数据」这节课中我会学到什么？

使用 SWR 或 TanStack Query 获取、缓存、去重和重新验证服务器数据，替代手动编写的 useEffect 获取数据模式。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「使用 SWR 和 React Query 缓存数据」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Frontend Academy