1
// TanStack Query v6 在 RSC 中的使用
2
import { queryOptions } from "@tanstack/react-query";
3
import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
4

5
// 在 Server Component 中预取数据
6
async function fetchUsers() {
7
  const res = await fetch("https://api.example.com/users");
8
  return res.json();
9
}
10

11
export default async function UsersPage() {
12
  const queryClient = getQueryClient();
13
  await queryClient.prefetchQuery(queryOptions({
14
    queryKey: ["users"],
15
    queryFn: fetchUsers,
16
  }));
17

18
  return (
19
    <HydrationBoundary state={dehydrate(queryClient)}>
20
      <UserList />
21
    </HydrationBoundary>
22
  );
23
}

1
// TanStack DB 的使用示例
2
import { createDatabase, schema } from "@tanstack/db";
3

4
const db = createDatabase({
5
  url: process.env.DATABASE_URL,
6
  schema: schema.define({
7
    users: {
8
      id: "serial primary key",
9
      name: "varchar(255) not null",
10
      email: "varchar(255) unique not null",
11
      role: "varchar(50) default 'user'",
12
    },
13
    posts: {
14
      id: "serial primary key",
15
      title: "varchar(255) not null",
16
      content: "text",
17
      author_id: "integer references users(id)",
18
      created_at: "timestamp default now()",
19
    },
20
  }),
21
});
22

23
// 跨表查询 — 自动推断返回类型
24
const recentPosts = await db.query.posts
25
  .select({
26
    id: true,
27
    title: true,
28
    author: {
29
      name: true,
30
      email: true,
31
    },
32
  })
33
  .orderBy("created_at", "desc")
34
  .limit(10)
35
  .execute();
36
// recentPosts 的类型自动推断为:
37
// Array<{ id: number; title: string; author: { name: string; email: string } }>

1
// TanStack AI 的使用示例
2
import { useAIQuery } from "@tanstack/ai";
3

4
function ArticleSummary({ articleId }: { articleId: number }) {
5
  // 就像 useQuery 一样使用 AI
6
  const { data, isLoading } = useAIQuery({
7
    // 先获取文章内容
8
    queryKey: ["article", articleId],
9
    queryFn: () => fetchArticle(articleId),
10
    // 再用 AI 生成摘要
11
    ai: {
12
      provider: "glm-5.1",
13
      systemPrompt: "你是一个技术文章摘要助手，用 2-3 句话概括文章要点",
14
      // AI 输出会自动跟随 query 刷新
15
    },
16
  });
17

18
  if (isLoading) return <div>加载中...</div>;
19
  return (
20
    <div>
21
      <h3>{data?.title}</h3>
22
      <p className="text-gray-500">{data?.aiSummary}</p>
23
    </div>
24
  );
25
}

1
// TanStack Form 配合 shadcn/ui 的使用示例
2
import { useForm } from "@tanstack/form";
3
import { z } from "zod";
4

5
const loginSchema = z.object({
6
  email: z.string().email("请输入有效的邮箱地址"),
7
  password: z.string().min(8, "密码至少需要 8 个字符"),
8
});
9

10
function LoginForm() {
11
  const form = useForm({
12
    defaultValues: {
13
      email: "",
14
      password: "",
15
    },
16
    validators: {
17
      onChange: loginSchema,
18
    },
19
    onSubmit: async (values) => {
20
      const response = await fetch("/api/login", {
21
        method: "POST",
22
        body: JSON.stringify(values),
23
      });
24
      if (!response.ok) {
25
        form.setError("根错误", "登录失败，请检查账号密码");
26
      }
27
    },
28
  });
29

30
  return (
31
    <form onSubmit={form.handleSubmit}>
32
      <input
33
        {...form.getFieldProps("email")}
34
        placeholder="邮箱"
35
        className="border p-2 rounded"
36
      />
37
      {form.getFieldError("email") && (
38
        <p className="text-red-500">{form.getFieldError("email")}</p>
39
      )}
40
      <input
41
        {...form.getFieldProps("password")}
42
        type="password"
43
        placeholder="密码"
44
        className="border p-2 rounded"
45
      />
46
      <button type="submit" className="bg-blue-500 text-white p-2 rounded">
47
        登录
48
      </button>
49
    </form>
50
  );
51
}

1
// TanStack Table v9 条件格式化示例
2
import { useReactTable, createColumnHelper } from "@tanstack/react-table";
3

4
type DeployStatus = {
5
  service: string;
6
  cpu: number;
7
  memory: number;
8
  latency: number;
9
  status: "healthy" | "warning" | "critical";
10
};
11

12
const columnHelper = createColumnHelper<DeployStatus>();
13

14
const columns = [
15
  columnHelper.accessor("service", {
16
    header: "服务名称",
17
    cell: (info) => info.getValue(),
18
  }),
19
  columnHelper.accessor("cpu", {
20
    header: "CPU 使用率",
21
    cell: (info) => `${info.getValue()}%`,
22
    // 条件格式化 — CPU > 80% 标红
23
    meta: {
24
      conditionalFormat: {
25
        rules: [
26
          { when: (v: number) => v > 80, style: "bg-red-100 text-red-800" },
27
          { when: (v: number) => v > 50, style: "bg-yellow-100 text-yellow-800" },
28
        ],
29
      },
30
    },
31
  }),
32
];