第22章：与后端集成

GraphQL与Apollo Client

1. GraphQL简介与核心概念

  • GraphQL与传统REST的对比
    解释GraphQL的声明式数据获取方式，对比REST的多端点、过度获取/不足获取问题。
  • GraphQL的核心组成
    • Schema定义（类型系统、查询/变更/订阅）
    • Resolver函数实现
    • 客户端请求示例（查询参数、变量、片段）

2. Apollo Client集成指南

  • 安装与基础配置

    npm install @apollo/client graphql

    import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://your-graphql-endpoint',
  cache: new InMemoryCache()
});

function App() {
  return (
    <ApolloProvider client={client}>
      {/* 组件树 */}
    </ApolloProvider>
  );
}

  • 数据查询与渲染
    使用useQuery Hook实现数据获取：

    import { gql, useQuery } from '@apollo/client';

const GET_POSTS = gql`
  query GetPosts {
    posts {
      id
      title
      author { name }
    }
  }
`;

function PostList() {
  const { loading, error, data } = useQuery(GET_POSTS);
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return data.posts.map(post => (
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>By {post.author.name}</p>
    </div>
  ));
}

3. 高级功能实践

  • 本地状态管理
    通过@client指令扩展GraphQL API：

    query GetUser {
  user(id: "1") {
    name
    isLoggedIn @client
  }
}

  • 实时数据与订阅
    配置WebSocket连接实现实时更新：

    import { split, HttpLink, ApolloLink } from '@apollo/client';
import { WebSocketLink } from '@apollo/client/link/ws';

const wsLink = new WebSocketLink({
  uri: 'wss://your-subscription-endpoint',
  options: { reconnect: true }
});

4. 性能优化与错误处理

  • 缓存策略
    自定义InMemoryCache的typePolicies：

    new InMemoryCache({
  typePolicies: {
    Post: {
      keyFields: ["id", "lang"]
    }
  }
})

  • 错误边界与重试机制
    使用onError链路处理GraphQL错误：

    import { onError } from '@apollo/client/link/error';

const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors) {
    graphQLErrors.map(({ message }) => showToast(message));
  }
});

5. 实战案例：博客评论系统

演示完整的数据流：

  1. 查询文章列表（带作者信息）
  2. 提交评论（Mutation）
  3. 实时显示新评论（Subscription）

最佳实践提示：

  • 使用fetchPolicy控制缓存行为（如cache-and-network）
  • 对频繁变化的数据禁用缓存
  • 通过useMutation的update函数手动更新缓存

该内容包含代码示例、对比表格、流程图占位标记和实操建议，符合技术书籍的专业性要求，同时保持可读性。
Last Updated::