编辑“︁Next.js React Query”︁（章节）

== 核心概念 ==
=== QueryClient 与 QueryClientProvider ===
React Query 的核心是 <code>QueryClient</code>，它管理所有查询的状态和缓存。在 Next.js 中，通常需要在应用顶层初始化并注入它：

<syntaxhighlight lang="javascript">
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

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

=== 基本查询（useQuery） ===
<code>useQuery</code> 是用于获取数据的核心钩子。以下是一个获取用户数据的示例：

<syntaxhighlight lang="javascript">
import { useQuery } from '@tanstack/react-query';

function UserProfile({ userId }) {
  const { data, isLoading, error } = useQuery({
    queryKey: ['user', userId], // 唯一标识查询的键
    queryFn: () => fetch(`/api/users/${userId}`).then(res => res.json()),
    staleTime: 5000, // 数据在5秒后视为过期
  });

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

  return <div>{data.name}</div>;
}
</syntaxhighlight>

=== 修改数据（useMutation） ===
<code>useMutation</code> 用于创建、更新或删除数据：

<syntaxhighlight lang="javascript">
import { useMutation } from '@tanstack/react-query';

function AddUser() {
  const mutation = useMutation({
    mutationFn: (newUser) => fetch('/api/users', {
      method: 'POST',
      body: JSON.stringify(newUser),
    }),
    onSuccess: () => {
      // 用户添加成功后的操作
    },
  });

  return (
    <button onClick={() => mutation.mutate({ name: 'New User' })}>
      Add User
    </button>
  );
}
</syntaxhighlight>