在传统的 RESTful API 架构中，每一个资源都会对应一组 API 接口，而 GraphQL 则使用一个统一的入口，允许客户端指定需要返回的数据的结构和内容，而无需让服务端的 API 返回整个资源。
本文将介绍 GraphQL 的核心概念以及实战技巧，包含以下内容：
- GraphQL 的基础构建块
- 使用 GraphQL 构建 API 的步骤
- 如何使用 Apollo 客户端与服务端进行通信
- GraphQL 的一些最佳实践
GraphQL 的基础构建块
GraphQL 由以下三个部分组成：
- Schema 定义了数据结构，包含类型以及类型之间的关系。
- Query 用于从服务端获取数据，与 REST 的 HTTP GET 类似。
- Mutation 用于向服务端发送数据并修改它们，类似于 REST 中的 POST/PUT/DELETE。
其中，Schema 是 GraphQL 最为核心的概念，它定义了构成 API 的各个部分并指定了 API 能否接受或返回的数据类型。GraphQL 有五种基本类型，包括标量、对象、接口、联合类型和枚举。其中标量是最简单的类型，包括字符串、数字、布尔值等。
下面是一个简单的 GraphQL schema 的例子：
-- -------------------- ---- ------- ---- ----- - -------- ----- ---- - ---- ---- - --- --- ----- ------- ---- ---- -
以上 schema 定义了一个名为 Query 的类型，它包含一个名为 user 的字段（也就是查询），该字段接受一个 ID 类型的参数并返回一个 User 类型的对象。User 类型由三个字段组成，包括 ID、name 和 age。
使用 GraphQL 构建 API 的步骤
在服务端定义 schema。
实现 resolver，用于指定每个字段的解析方法，确定如何从数据库或其他外部数据源中获取数据。
下面是一个简单的 resolver 的例子：
-- -------------------- ---- -------
----- --------- - -
------ -
----- --- - -- -- -- -
------ ---------------- - ---- ----- ----- ----------------------- -- -
------ -----------
---
--
--
--- 实现 GraphQL API，例如使用 Apollo Server：
const server = new ApolloServer({
typeDefs: schema,
resolvers,
});
server.listen().then(({ url }) => {
console.log(`Server ready at ${url}`);
});在这个例子中，schema 和 resolver 都是通过参数传递给 ApolloServer 的。
使用 Apollo 客户端与服务端进行通信
在客户端使用 GraphQL，可以使用 Apollo Client。Apollo Client 提供了多种方式与服务端进行通信，例如使用 REST、WebSocket 和 GraphQL Subscription。下面是基本的使用方式。
- 安装 Apollo Client：
npm i apollo-boost react-apollo graphql
- 初始化 Apollo Client：
import ApolloClient from "apollo-boost";
const client = new ApolloClient({
uri: "http://localhost:4000/graphql",
});其中，uri 可以指向服务端的地址。
- 使用 Query 或 Mutation 组件向服务端发送请求：
-- -------------------- ---- -------
------ --- ---- --------------
------ - ----- - ---- ---------------
----- -------- - ----
----- ------------ ---- -
-------- ---- -
--
----
---
-
-
--
-------- ------ -- -- -
------ -
------ ---------------- ------------ -- ---
--- -------- ------ ---- -- -- -
-- --------- ------ -------------
-- ------- ------ ------- ------------------
------ -
-----
-------------------------
----------------------
------
--
--
--------
--
-以上代码定义了一个查询 GET_USER，其中有一个参数 id，然后使用 Query 组件将查询发送到服务端。最后根据返回的数据渲染 UI。
GraphQL 的一些最佳实践
- 使用分层架构，将 GraphQL Schema 与其他服务分离。
- 使用 DataLoader 优化查询性能，避免重复查询相同的数据。
- 定义合理的 Schema 和查询（Query）/修改（Mutation）操作，避免在服务端返回过多的数据。
- 对于小型应用，可以考虑使用 Prisma 等 GraphQL ORM 工具，简化开发流程。
总结
在本文中，我们介绍了 GraphQL 的基础构建块及其工作原理，并使用实例详细说明了如何使用 GraphQL 构建 API 并使用 Apollo 客户端与服务端进行通信。同时，我们也分享了一些最佳实践和开发建议。使用 GraphQL 可以使开发者从 RESTful API 的繁琐中解放出来，更高效地完成项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64673478968c7c53b0796d8b