在现代 Web 应用程序中，API 是一个关键因素，它能让前后端分离，使得不同的客户端可以在不同的平台上使用。传统的 RESTful API 已经非常流行，但是随着数据的复杂性增加，GraphQL API 在前端开发中逐渐成为了另一种流行的选择。如果你想在你的现有应用中添加一个 GraphQL API，下面是一些步骤和指导。
步骤
了解你的数据模型
在添加 GraphQL API 前，你需要对你的数据模型有一些深入的了解。这个数据模型应该描述了系统中的所有数据和它们之间的关系。这个数据模型将会被用来作为 GraphQL API 的 schema。它会描述对象、类型、查询等等。
安装依赖
接下来你需要安装一些依赖。你需要安装以下的工具和库：
- graphql：一个用于创建 GraphQL 解析器的 JavaScript 库
- express-graphql：一个用于在 Express 应用中集成 GraphQL API 的库
- graphql-tools：一个用于创建和操作 GraphQL schema 的工具库
你可以使用 npm 来安装这些库，如下所示：
npm install graphql express-graphql graphql-tools --save
创建 schema
创建 schema 是添加 GraphQL API 的重要步骤。使用 GraphQL schema 语言来定义你的 schema。它是一种声明性、强类型和自描述的语言，可以描述你的 GraphQL API 所暴露的所有对象和字段。如下所示是一个简单的 schema：
-- -------------------- ---- ------- ---- ----- - --- ---- -------- ----- ---- ------ ------ - ---- -------- - ----------------- ------------ ---- - ---- ---- - --- --- ----- ------- ------ ------- - ----- --------- - ----- ------- ------ ------- -展开代码
创建解析器
由于 schema 只是一张图纸，所以需要实际的代码来完成 GraphQL 请求的解析。你需要编写解析器来处理你的查询和变更。你可以使用 makeExecutableSchema 函数来创建 schema，并将它们传递给 resolvers 对象，如下所示：
-- -------------------- ---- ------- ----- - -------------------- - - ------------------------- ----- --------- - ----------------------- ----- -------- - - ---- ----- - --- ---- -------- ----- ---- ------ ------ - ---- -------- - ----------------- ------------ ---- - ---- ---- - --- --- ----- ------- ------ ------- - ----- --------- - ----- ------- ------ ------- - -- ----- ------ - ---------------------- --------- --------- --- -------------- - -------展开代码
创建解析逻辑
然后你要编写解析逻辑，实现查询和变更的处理逻辑。resolvers 应该是一个对象，包含一个或多个函数。每个函数都应该返回执行结果。如下所示是一个简单的 resolver：
-- -------------------- ---- ------- ----- ----- - - - --- ---- ----- ----- ------ ---------------------- -- - --- ---- ----- ----- ------ ------------------ -- -- ----- --------- - - ------ - --- -- -- --------- ----- ------ - -- -- -- --------------- -- ------- --- ---- ------ -- -- ------ -- --------- - ----------- ------ - ----- -- -- - ----- ---- - - --- ------------- - -------------- -------- -- ----------------- ------ ----- -- -- -- -------------- - ----------展开代码
使用 Express-GraphQL 集成 GraphQL API
最后一个步骤是将 GraphQL API 集成到 Express 应用中。你需要编写一个路由来集成 GraphQL，并使用 express-graphql 库来创建 HTTP 服务器。如下所示是一个简单的 Express 应用，它集成了 GraphQL API：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ----------- - --------------------------- ----- ------ - -------------------- ----- --- - ---------- ------------------- ------------- ------- --------- ----- ---- ---------------- -- -- ------------------- ------- -- ---- --------展开代码
示例代码
下面是一个完整的示例代码，用于将 GraphQL API 添加到现有应用程序中。你可以将它作为模板来编写自己的 GraphQL API。
-- -------------------- ---- ------- ----- - -------------------- - - ------------------------- ----- ------- - ------------------- ----- ----------- - --------------------------- -- -- ------ ----- -------- - - ---- ----- - --- ---- -------- ----- ---- ------ ------ - ---- -------- - ----------------- ------------ ---- - ---- ---- - --- --- ----- ------- ------ ------- - ----- --------- - ----- ------- ------ ------- - -- -- -- -------- ----- ----- - - - --- ---- ----- ----- ------ ---------------------- -- - --- ---- ----- ----- ------ ------------------ -- -- ----- --------- - - ------ - --- -- -- --------- ----- ------ - -- -- -- --------------- -- ------- --- ---- ------ -- -- ------ -- --------- - ----------- ------ - ----- -- -- - ----- ---- - - --- ------------- - -------------- -------- -- ----------------- ------ ----- -- -- -- -- -- ------ ----- ------ - ---------------------- --------- --------- --- -- -- ------- -- ----- --- - ---------- -- -- ------- --- ------------------- ------------- ------- --------- ----- ---- -- ----- ---------------- -- -- ------------------- ------- -- ---- --------展开代码
结论
在这篇文章中，我们已经介绍了如何将 GraphQL API 添加到现有的应用程序中。GraphQL API 不仅使得数据复杂性的管理更简单，而且使得前后端解耦更容易。如果你还没有开始使用 GraphQL API，它值得你去尝试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676f6e26e9a7045d0d72c389
