23、使用Apollo Client与GraphQL API交互及构建可复用组件

使用Apollo Client与GraphQL API交互及构建可复用组件

1. 使用Apollo Client

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

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 变量赋值：