11、利用 Apollo 将 React 集成到后端

利用 Apollo 将 React 集成到后端

在前端开发中，将 React 与 Apollo 结合使用可以更高效地处理 GraphQL 请求。本文将详细介绍如何使用 Apollo 进行数据查询、突变操作，以及如何更新用户界面。

1. 渲染和请求数据的优化

在渲染和请求数据时，有一种方式可能会偏离 React 的标准组件工作流程。为了改进这一点，可以为每个使用的 Query 或 Mutation 组件编写单独的组件，将 Apollo 组件提供的所有属性传递给自定义组件，这样在使用 Query 组件时，渲染函数会更易读。

我们将继续使用 Query 和 Mutation 组件，这是最新版本的 Apollo Client 中编写 GraphQL 请求的默认方式。

2. Apollo Client 的突变操作

我们已经改变了客户端获取数据的方式，接下来要改变创建新帖子的方式。在使用 Apollo Client 之前，需要手动将新的假帖子添加到浏览器内存中的演示帖子数组中。现在，通过 Apollo Client 使用 addPost 突变将文本区域中的所有内容发送到 GraphQL API。

有两种方式可以实现突变操作：高阶组件（HoC）方法和 Mutation 组件方法。

2.1 Apollo Mutation HoC

完整的 HoC 工作流程需要先设置 HoC Query 方法，否则无法看到这种方法相对于其他方法的优势。

设置突变 HoC 的步骤如下：
1. 从 react-apollo 包中导入 compose 方法：