GraphQL 客户端

REST 一资源一 URL；GraphQL 用单一 endpoint + 声明式查询，由客户端决定 要哪些字段。React 侧常见 Apollo Client、Relay（Meta 内部场景多）；需先理解 schema，见 graphql-essentials。

学习目标

• 说清 GraphQL 客户端在 React 中的职责
• 对比 Apollo Client 与 Relay 的定位
• 知道何时 REST + Query 比 GraphQL 更省事

客户端做什么

React 组件
  → useQuery / useMutation（Apollo）
  → HTTP POST /graphql
  → 缓存 normalized by __typename + id
  → UI 更新

与 REST 不同：同一次请求可拉 track + lessons + author 嵌套，减少 round-trip；代价是 缓存与类型生成 更复杂。

Apollo Client 概览

import { ApolloClient, InMemoryCache, gql, useQuery } from "@apollo/client";

const GET_TRACK = gql`
  query GetTrack($slug: String!) {
    track(slug: $slug) {
      title
      lessons { slug title }
    }
  }
`;

function TrackPage({ slug }: { slug: string }) {
  const { data, loading, error } = useQuery(GET_TRACK, { variables: { slug } });
  // ...
}

InMemoryCache 按 id 合并实体，列表页与详情页可共享同一条 track 记录。配合 Apollo DevTools 调试 cache。

适合：多客户端、字段需求差异大、已有 GraphQL 后端（如 Spring GraphQL，见 gql-spring）。

Relay 简览

• 编译期：GraphQL 查询静态分析，生成类型与 runtime artifact
• 强约定：connection、pagination、fragment colocation
• 学习成本高，新项目非 Meta 栈较少首选

	Apollo	Relay
上手	快	陡
类型/codegen	可选 graphql-codegen	内置编译流
灵活度	高	规范强
典型团队	中小全栈	大型 FE 平台

与 TanStack Query 的关系

GraphQL 也可只用 fetch + Query，不用 Apollo——适合查询简单、不想引入 normalized cache。Apollo 优势在 复杂图、订阅、本地 state 与 remote 混合。

REST 项目继续 rxe-query 路线即可，不必为「时髦」上 GraphQL。