GraphQL 是一种用于构建 API 的查询语言，它可以根据客户端的需要动态加载数据。相比 RESTful API 需要多次请求才能获取所需数据，GraphQL 只需要一次请求即可获取需要的数据，将前端的负担大大降低。在前端领域，GraphQL 也被广泛应用于构建跨平台的移动应用以及大型 Web 应用的数据层。
在本文中，我们将讨论如何使用 GraphQL 动态加载数据，并提供代码示例。
什么是 GraphQL？
GraphQL 是 Facebook 开源的一种 API 查询语言和运行时，它是一种客户端驱动的 API 模式，可以根据客户端的需求灵活地构建和组合查询。GraphQL 的核心思想是以数据为中心，前端定义和描述需要的数据结构，GraphQL 然后负责将这些请求转化为具体的数据。
GraphQL 的优点
相比传统的 RESTful API，GraphQL 具有以下优点：
- 灵活性：GraphQL 可以按需获取数据，客户端可以根据需求灵活地组合查询语句，这使得前端可以快速构建自己所需的数据结构；
- 性能优化：GraphQL 只返回客户端请求的数据，避免不必要的数据传输，从而降低网络带宽的消耗；
- 可扩展性：GraphQL 可以轻松添加新的资源类型和字段，而不用修改现有代码；
- 文档化：GraphQL 的数据结构和 API 文档都是自动生成的，减少维护文档的成本。
GraphQL 的基本术语
在掌握 GraphQL 的使用方法之前，需要先学习 GraphQL 的一些基本术语和概念。
Schema
Schema 是一种定义类型和字段的语言，它规定了客户端可以请求的数据类型、字段、以及类型之间的关系。
Query
Query 是由客户端发送给服务器的请求，它定义了客户端要请求的数据结构。
Mutation
Mutation 是一种用于修改数据的请求，类似于 RESTful API 中的 POST、PUT 和 DELETE 请求。
Resolver
Resolver 是用于处理 Query 和 Mutation 的函数，它接收客户端发来的请求，并返回需要的数据。
Subscription
Subscription 是一种用于实时更新数据的 GraphQL 特性，它可以让客户端监听服务器端的数据变化。
如何使用 GraphQL
在 React 应用中使用 GraphQL 是一种比较常见的做法，下面我们将带领大家学习如何使用 GraphQL。
安装依赖
首先，我们需要使用 npm 或者 yarn 安装相应的依赖库：
npm i apollo-boost react-apollo graphql-tag graphql
或者
yarn add apollo-boost react-apollo graphql-tag graphql
定义一个 Query
我们可以通过以下代码定义一个 Query：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - --- - ---- --------------- ------ - -------- - ---- ---------------------- ----- --------- - ---- ----- - ----- - -- ---- ----- - - -- -------- ----- - ----- - -------- ------ ---- - - -------------------- -- --------- ------ ------------------ -- ------- ------ ------------- ------ - ----- ---------------------- -- - -- -------------- ----------- -------------- ---- --- ------ -- - ------ ------- ----展开代码
上述代码中，我们通过 gql 函数定义了一个 Query，Query 的名称为 GET_USERS，Query 的内容为请求 users 的列表，每个 user 包含 id、name 和 email 三个字段。
接着，我们通过 useQuery hook 使用定义好的 Query，当数据正在加载时，我们显示 Loading...，当加载完成之后，我们通过 map 函数将 users 列表渲染出来。
缓存数据
Apollo 提供了一个本地缓存来管理数据请求缓存，这可以避免多次请求同一段代码。以下是我们添加缓存的代码：
-- -------------------- ---- ------- ------ - ------------- - ---- ------------------------ ------ - -------- - ---- ------------------- ------ - ------------ - ---- ---------------- ----- ----- - --- ---------------- ----- ------ - --- -------------- ------ ----- --- ---------- ---- ------------------------------- -- --- ---------------- --------------- ---------------- ---- -- ------------------ ------------------------------- --展开代码
Subscription
使用 Subscription 来实时更新数据也非常方便。以下是一个 Subscription 示例代码：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - --- - ---- --------------- ------ - --------------- - ---- ---------------------- ----- ----------- - ---- ------------ - ---------- - -- ---- - - -- -------- ----- - ----- - ---- - - ----------------------------- ------ - ----- ----- -- - --- --- -------- ---------------------- ---- -- ------ -- - ------ ------- ----展开代码
在上述代码中，我们定义了一个名为 NEW_COMMENT 的 Subscription，它会监听服务器是否有新的 Comment 数据。如果有，我们将展示新的 Comment 信息。
Mutation
使用 Mutation 也非常方便。下面是一个示例代码：
-- -------------------- ---- ------- ------ ------ - -------- - ---- -------- ------ - --- - ---- --------------- ------ - ----------- - ---- ---------------------- ----- -------- - ---- -------- --------------- -------- - -------------- ------- - -- ----- - - -- -------- ----- - ----- ------- --------- - ------------- ----- --------- - --------------------- - ------------- - ---- -- - -------------- ------- - ------------------- - --- - ----- ---------- - --------------------- ----- ------------- --------- ---- -------- ------- -- ---- - -- ----- - - --- ------ ------------------ ------------ - - --- - --- -------- --------------- - ------------------- -- --------------- ------- --------- ---------- - ----- -- ------------------- - ----------- ----------- -------- - ----------- ------- --- ------------------------ - ---------- ------ ---------- ----- - - --- ------------- - ------ - ----- ----- ------------------------ ------ ------------- ------------- -- ------------------------- -- ------- ----------------- ------------- ------- ------ -- - ------ ------- ----展开代码
在上述代码中，我们通过 useMutation hook 定义了一个名为 ADD_TODO 的 Mutation，它可以增加一条 Todo 数据。当数据修改完成时，我们需要更新缓存。在示例代码中，我们使用了 update 方法来处理缓存的更新。同时，我们也可以加上 optimisticResponse 选项来模拟增加数据时的效果。
到这里，我们已经学习了 GraphQL 的一些基本术语和使用方法，了解了如何在 React 应用中使用 GraphQL 来动态加载数据。
总体上，GraphQL 使用简单、灵活性强、性能高，如果你想快速构建大型的数据层，我们鼓励你尝试使用 GraphQL。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b772a4306f20b3a646b919
