Apollo Client 安装

我们已经安装了 Apollo server 以在服务器端构建 GraphQL 规范。现在，是时候设置 Apollo client 以构建客户端应用程序了。

什么是 Apollo Client？

Apollo client 与 GraphQL 一起使用，以提供构建客户端应用程序的最佳环境。它是一个完整的状态管理库，也是一个功能齐全的用于 JavaScript 应用程序的缓存 GraphQL 客户端。 使用 Apollo client，我们只需编写一个 GraphQL 查询，它将负责请求和缓存我们的数据，以及更新我们的 UI。

Apollo Client 可以很容易地与 React、Angular、Vue、Meteor 和 Ember 等集成。

Apollo client 方便开发者使用 GraphQL 快速构建 UI。它也可以用于从任何 JavaScript 前端检索数据。

Apollo Client 的特性

以下是 Apollo Client 最重要特性的列表

• 简单易用： Apollo client 简单易用，因此您无需学习其高级特性即可使用它。
• 声明式数据获取： Apollo Client 方便开发者编写查询和检索数据，而无需手动跟踪加载状态。
• 出色的开发者工具： Apollo Client 为 TypeScript、Chrome DevTools 和 VS Code 提供了许多开发者工具。
• 与 React 兼容： Apollo Client 专为现代 React 设计。它方便开发者利用最新的 React 特性。
• 普遍兼容： Apollo client 具有普遍的兼容性，因为它方便您使用任何构建设置、任何 GraphQL 服务器和任何 GraphQL 模式。
• 逐步采用： Apollo client 是可以逐步采用的。您可以将其放入现有的 JavaScript 应用程序中，并开始使用 GraphQL 作为 UI 的一部分。
• 小巧灵活： Apollo client 小巧灵活，因此您不会得到不必要的东西。其核心压缩后不到 25kb。
• 为交互式应用程序构建： Apollo client 是为交互式应用程序构建的，因此您可以进行更改并立即在 UI 中看到反映。
• 开源社区： Apollo Client 拥有一个活跃的开源社区，我们可以在其中与成千上万的开发者分享知识。

Apollo Client 支持的框架

除了 React 之外，Apollo Client 还支持以下其他平台

JavaScript

• Angular
• Vue
• 流星
• Ember

Web 组件

• Apollo Elements

原生移动

• 使用 Swift 的原生 iOS
• 使用 Java 的原生 Android

设置 Apollo Client

为 Apollo client 打开一个新的 node.js 命令提示符。在执行客户端应用程序之前，必须保持 node.js 服务器终端运行。

客户端 React 应用程序将在端口号 3000 上运行，服务器应用程序将在端口号 4000 上运行。

服务器应用程序

步骤 1：创建一个 React 应用程序

步骤 2：启动客户端

转到终端中的当前文件夹路径 "hello-world-client"，并使用 npm start 命令启动项目。

输出

步骤 3：安装 Apollo Client 库

在这里，我们将为我们的 React 应用程序安装和配置 Apollo Client。 安装和配置 Apollo client 的最佳和最简单的方法是使用 Apollo Boost。 这将使用推荐的设置配置 Apollo client。 Apollo Boost 包含用于构建 Apollo 应用程序的必需包，例如内存缓存、本地状态管理和错误处理。 它也可以用于处理身份验证等功能。

现在，GraphQL 库和 Apollo Boost 包已下载到客户端。

步骤 4：修改 index.js 文件

使用以下代码修改 index.js 文件中的 App 组件

输出

{
  "data": {
    "companies": [
      {
        "name": "Infosys",
        "owner": "N.R Narayan Murthy"
      },
      {
        "name": "Wipro",
        "owner": "Mohamed Hasham Premji"
      },
      {
        "name": "Reliance Industries",
        "owner": "Dhirubhai Ambani"
      },
      {
        "name": "Bajaj Auto",
        "owner": "Jamnalal Bajaj"
      }
    ]
  }
}