在现代 Web 开发中，前端开发人员通常需要从多个数据源同步不断变化的数据。传统的数据获取方式，比如 REST API ，虽然使用方便，但是在大规模且需要高度定制化的场景下，可能不能满足需求。这时候，GraphQL 就成了一个备受关注的选择。本文将介绍前端 GraphQL 数据集成方案及其最佳实践。
GraphQL 简介
GraphQL 是由 Facebook 起草的一种数据查询和集成规范。它的主要特点是：支持客户端发起精细化的数据查询请求，而不需要后端提供预先定义的 RESTful API 接口。同时，GraphQL 支持跨数据源的数据聚合，可以让前端在一次请求中直接获取多个数据源的数据。
举一个简单的例子，比如要查询一本书的信息及其对应的作者信息，使用 RESTful API，可能需要发起如下两次请求：
fetch('/api/books/1').then(response => response.json());
fetch('/api/authors/12').then(response => response.json());使用 GraphQL，则可以定义如下查询语句：
query {
book(id: 1) {
title
authors {
name
}
}
}前端集成 GraphQL 数据的方案
下面我们来介绍一些常见的前端集成 GraphQL 数据的方案。需要注意的是，这里的方案可以相互组合，具体实现可以根据项目需求进行灵活地调整。
Apollo Client
Apollo Client 是一个基于 GraphQL 的状态管理库。它提供了一种 Apollo Link 的机制，用于对 GraphQL 数据源进行查询和变异操作。
具体的使用流程如下：
在项目中安装 apollo-client 依赖：
npm install apollo-client graphql
创建一个 Apollo Client 实例：
import { ApolloClient, InMemoryCache } from '@apollo/client'; const client = new ApolloClient({ uri: '/graphql', cache: new InMemoryCache() });这里
uri参数指定了 GraphQL API 的地址，InMemoryCache是 Apollo Client 默认使用的缓存机制。发送一个 GraphQL 查询请求：
-- -------------------- ---- ------- ------ - --- - ---- ----------------- ----- --------- - ---- ----- - ----- - -- ----- ------- - ---- - - - -- -------------- ------ --------- -------------- -- --------------------------
类似于 Redux，Apollo Client 也提供了从查询、变异到订阅的全流程管理机制。在实际应用中，开发者可以使用它自己的 API ，或是结合其它状态管理工具 (比如 Redux)。
Relay
Relay 是 Facebook 开发的一个高度定制化的 GraphQL 客户端框架。它的核心原则是从一次查询的角度来考虑定义数据获取方式。Relay 将查询生成为按需加载的组件渲染器，并且自动管理查询、缓存等细节。
自定义集成
如果项目需求较为简单，也可以直接使用 GraphQL 客户端库 (比如 graphql.js) 发送查询请求。当然，这种方式需要自己手动管理查询与查询结果之间的缓存，一般用得较少。
GraphQL 最佳实践
以下是使用 GraphQL 进行前端数据集成的一些最佳实践。这些实践并非严格要求，开发人员应将其视为参考。
合理规划 API 设计
与 RESTful API 不同，GraphQL 中没有预定义的路由映射器。因此，应该合理规划 API 设计，使其更为易于维护。
比如，使用一下方式定义查询：
-- -------------------- ---- -------
----- -
----- -
--
-----
------ -
----
-
-
-这种查询可能需要涉及多次查询操作，但是如果在定义时优化查询语句，可以减少查询次数：
query {
books {
id
title
authorName
}
}在这种设计下，后端服务器可以聚合所有 book 数据以及对应的 authorName 数据，只需发起一次查询。
定义数据模型的时候不宜过度嵌套
GraphQL 精细化的查询语言使得前端可以自由定义查询，也就意味着后端需要支持较多的查询语句。如果在数据模型定义的时候过度嵌套，会导致查询语句的复杂度增加，同时数据处理的时间也会增加。因此，定义数据模型时应尽量减少查询嵌套的层数。
比如，不宜使用以下方式定义数据模型：
-- -------------------- ---- -------
----- ---- - -
--- ------------
------ ---- ---- -------
--------- -
-
--- ------------
------ -------- ---
--------- -
-
--- --------------
------ -------- -----
-------- -----
--
-
--- --------------
------ -------- -----
-------- -----
-
-
--
-
--- ------------
------ -------- ---
--------- -
-
--- --------------
------ -------- -----
-------- -----
--
-
--- --------------
------ -------- -----
-------- -----
-
-
-
-
--这种嵌套很深的数据结构对查询语句的复杂度有很大的影响。如果逐级查询章节和内容，代码可能如下：
-- -------------------- ---- -------
----- ----- - ----
----- ---- -
---- -
--
-----
-------- -
--
-----
-------- -
--
-----
-------
-
-
-
-
--
-- ---因此，可以尝试分离出章节和内容，定义一个章节关联表 (chapter_2_section) ：
-- -------------------- ---- -------
----- ---- - -
--- ------------
------ ---- ---- -------
--------- -
-
--- ------------
------ -------- --
--
-
--- ------------
------ -------- --
-
--
--------- -
-
--- ------------
---------- ------------
------ -------- ---
-------- -----
--
-
--- ------------
---------- ------------
------ -------- ---
-------- -----
--
-
--- ------------
---------- ------------
------ -------- ---
-------- -----
--
-
--- ------------
---------- ------------
------ -------- ---
-------- -----
-
-
--这样设计后，查询就可以更为简单：
-- -------------------- ---- -------
----- -
---- -
--
-----
-------- -
--
-----
-
-------- -
--
-----
-------
------- -
--
-----
-
-
-
-使用 DataLoader 进行缓存处理
DataLoader 是一个非常实用的工具，它可以在 GraphQL 查询过程中自动缓存数据，避免重复查询。
比如，在以前的查询中，我们使用了如下方式查询一个作者和他所写的所有书籍：
-- -------------------- ---- -------
----- -
---------- ------------- -
----
----- -
--
-----
-
-
-下面我们引入 DataLoader，对查询结果进行缓存处理：
-- -------------------- ---- -------
------ ---------- ---- -------------
----- ------------- - --- ---------------- ------ -- -
----- ------- - ----- -------------------
------ ------------ -- ------------------- -- --------- --- ------
---
----- ----------- - --- ---------------- ------ -- -
----- ----- - ----- ----------------------------
------ ------------ -- ----------------- -- ------------- --- ------
---
----- --------- - -
------- -
------ -------- -- ---------------------------
--
------ -
------- --- - -- -- -- ----------------------
-
--使用 DataLoader 后，每次查询都会先从 DataLoader 中查找缓存数据。如果缓存中没有，再发起查询请求。这样就减少了重复查询的次数。
总结
GraphQL 作为一种新型的数据集成和查询规范，具有更为灵活的查询方式和跨数据源聚合的能力，因此备受关注。在前端应用中，使用 Apollo Client 和 Relay 等客户端工具，可以更加高效地集成 GraphQL 数据。同时，我们也需要注意遵循一些最佳实践，优化查询语句和数据模型设计，保证查询性能和效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647c55b3968c7c53b076bbae