3.2.2 React整合GraphQL前端系统设计

React和JSX这种设计和实现UI的方式是声明式的，任何需要出现在某个位置的UI组件，只要被声明在对应的标签内部即可。

由于React和GraphQL都是要什么就声明什么的设计方式，造就二者的天然结合。UI组件想要什么数据就声明在查询里，根据数据来渲染（render）用户界面，比如产品列表，根据查询操作结果里有几条产品数据，就渲染几个产品条目组件到用户界面。

图3-2描述了如何把GraphQL与React组件整合到一起。把React组件的根节点用GraphQL客户端提供的AppolloProvider“包起来”，然后把需要整合GraphQL数据的组件，如“产品列表”用graphql(…)函数“包起来”。其他结构以及组件之间的关系不变，这就完成了GraphQL和React的整合。

图3-2体现出React项目整合GraphQL的两个特点：

1．项目结构（React UI组件结构）保持不变

整合GraphQL后的React项目，仍然保持传统的树形结构。UI组件之间父子关系不变，props中数据下发的方式不变。

2．只有一部分组件需要结合GraphQL

并不是每个组件都需要和GraphQL打交道。对于需要和GraphQL打交道的组件，比如产品列表，把普通React组件和GraphQL查询操作用一个Apollo客户端提供的函数“包起来”。这样“包起来”的组件就可以“看”到GraphQL的数据，并进行处理——把从GraphQL服务器端得到的每一条产品数据都创建一个产品条目组件。产品条目组件就是普通的React组件，它不与GraphQL查询打交道，只接收从父节点传过来的数据属性。

每个产品条目组件想要从服务器端拿到更多的产品细节数据，理论上可以绑定一个GraphQL的查询，但是最好不要在产品条目组件被加载的时候发送GraphQL请求，因为如果UI同时显示20条产品条目，需要同时发送20条请求到服务器端，这没有必要，也不符合GraphQL的设计初衷，完全可以在父节点组件一次性拿到所有需要的数据。