23、探索 GraphQL API 交互与可复用组件构建

探索 GraphQL API 交互与可复用组件构建

1. 使用 Apollo Client 与 GraphQL API 交互

在与 GraphQL API 交互时，Apollo Client 是一个强大的工具。它能直接与 GraphQL 服务器交互，具备 useQuery 和 useMutation 等钩子，还能将数据存储在客户端缓存中。

1.1 安装 Apollo Client

在终端运行以下命令来安装 Apollo Client：

npm i @apollo/client graphql

这个库包含了 TypeScript 类型，无需额外安装其他包。

1.2 重构 App 组件

按以下步骤重构 App 组件：
1. 打开 App.tsx ，将 React Query 导入替换为 Apollo Client 导入：

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

2. 更新 queryClient 变量赋值：

co