Apollo Client

Apollo Client 是 React 生态常用的 GraphQL 客户端：管理 Query/Mutation、规范化缓存、loading/error 状态。可与 react-essentials 组件模型、nextjs-essentials App Router 集成。

学习目标

• 配置 ApolloProvider 与 HttpLink
• 用 useQuery / useMutation 替代裸 fetch
• 理解本站仍以 REST 为主、Apollo 用于实验页

核心内容

基本 setup

// lib/apollo-client.ts
import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client";

export const apolloClient = new ApolloClient({
  link: new HttpLink({ uri: process.env.NEXT_PUBLIC_GRAPHQL_URL ?? "/graphql" }),
  cache: new InMemoryCache(),
});

// app/lab/graphql/page.tsx（实验路由）
"use client";
import { ApolloProvider, useQuery, gql } from "@apollo/client";
import { apolloClient } from "@/lib/apollo-client";

const TRACKS = gql`
  query Tracks { tracks { slug title } }
`;

function TrackList() {
  const { data, loading, error } = useQuery(TRACKS);
  if (loading) return <p>加载中…</p>;
  if (error) return <p>{error.message}</p>;
  return (
    <ul>
      {data.tracks.map((t) => (
        <li key={t.slug}>{t.title}</li>
      ))}
    </ul>
  );
}

与 REST 三态模式相同；差异在缓存键由 slug 等字段自动归一化。

与 REST fetch 对照

生产课时页：

// 主路径 — REST
const res = await fetch(`${API}/tracks/${slug}/lessons/${lessonSlug}`);

不要把全站改为 GraphQL；实验页对比即可。Apollo 对 多视图共享 track 对象 有优势（详情/侧边栏同步更新）。

SSR 注意

Next.js RSC 默认服务端组件；Apollo 经典用法在 Client Component。RSC 可 fetch GraphQL POST 或使用 @apollo/experimental-nextjs-app-support（按版本选方案）。本站 MDX 课时渲染仍走 REST contentMd。

与 MongoDB 实验 API

若 lab Resolver 读 MongoDB 评论，Apollo 缓存 comment by id；REST 则用 SWR key /api/lab/comments?lesson=...。

练习

• 用 useQuery 拉取单个 track(slug: "graphql-essentials") 含 lessons
• 对比同数据用 的代码行数与缓存行为