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

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

1. 使用Apollo Client与GraphQL API交互

1.1 理解Apollo Client

Apollo Client是用于与GraphQL服务器交互的客户端库。它具有 useQuery 和 useMutation 等查询和变异钩子，与React Query类似。Apollo Client还能将数据存储在客户端缓存中，并且需要一个提供者组件放置在需要GraphQL数据的组件之上。与React Query不同的是，Apollo Client直接与GraphQL API交互，无需额外的函数来完成此操作。

1.2 安装Apollo Client

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

npm i @apollo/client graphql

该库包含TypeScript类型，无需安装额外的包。

1.3 重构App组件

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

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