24、与 GraphQL API 交互：从 Axios 到 Apollo 的实践指南

与 GraphQL API 交互：从 Axios 到 Apollo 的实践指南

在现代 Web 开发中，GraphQL 作为一种强大的数据查询语言，正逐渐成为开发者的首选。本文将详细介绍如何使用 Axios 和 Apollo 客户端与 GraphQL 服务器进行交互，包括查询数据、实现搜索功能以及执行突变操作。

1. 使用 Axios 查询 GraphQL 服务器

在 React 和 TypeScript 项目中，我们可以使用 Axios 库来发起 GraphQL 查询。以下是具体步骤：
1. 定义接口 ：在 Header.tsx 文件中，创建两个接口用于定义 GraphQL 查询的响应和其中的查看器数据。

interface IViewer {
  name: string;
  avatarUrl: string;
}
interface IQueryResult {
  data: {
    viewer: IViewer;
  };
}

2. 创建状态 ：在 Header 组件中创建一个状态变量 viewer 来存储查看器数据。

const [viewer, setViewer]: [
  IViewer,
  (viewer: IViewer) => v