GraphQL Schema 模块化:如何提高代码复用

阅读时长 5 分钟读完

GraphQL 是一种通过声明式数据查询语言来访问 API 的标准。它可以更好地处理多个数据源、复杂的查询、多个客户端的需求等情况。在编写 GraphQL Schema 时,将所有的类型和字段都写在一个文件中会导致文件过大、难以维护。本文将讲述如何在 GraphQL Schema 中使用模块化,提高代码复用性。

什么是 GraphQL Schema 模块化

在 GraphQL Schema 中,将 Schema 中的类型、查询、变量等功能,拆分到不同的文件中,这种拆分方式就是 GraphQL Schema 模块化。

为 GraphQL Schema 模块化提供支持的工具

有几个工具可以帮助我们在 GraphQL Schema 中实现模块化:

  1. graphql-import:支持将 GraphQL schema、query、mutation、subscription、类型定义等模块引入到其他模块中。它可以导入 .graphql 文件、 .gql 文件、 JS 文件、TS 文件、 .json 文件等。

  2. graphql-tools:它是一个基于 GraphQL 的工具集,通过它可以方便地将 .graphql 文件转换为 JavaScript 中的类型定义,以及将 ResolverSchema 中的功能模块化。

如何使用 GraphQL Schema 模块化

使用 graphql-import 导入模块

  1. 安装 graphql-import
  1. 创建一个 Query 类型的文件 Query.graphql,定义一个查询类型:
  1. 创建 User.graphql 文件,定义用户类型:
  1. Query.graphql 中导入 User.graphql
  1. 使用 fs 模块读取 Query.graphql 文件后直接将其转换为 Schema。
-- -------------------- ---- -------
-- ----------
----- - -------------------- - - ------------------------
----- - ------------ - - -------------------------
----- -- - -------------

----- -------- - -------------------------------
----- --------- - --

-------------- - ----------------------
  ---------
  ----------
--
  1. 这时我们可以使用 GraphQL Playground 等工具访问用户类型和 query 类型:

使用 graphql-tools 模块化

graphql-tools 的模块化方式与 graphql-import 相似,不同的是使用方式。

  1. 安装 graphql-tools
  1. 创建 user.js 文件
  1. 创建 userQuery.js 文件
  1. index.js 中将 userQuery 和 user 组合在一起:
-- -------------------- ---- -------
-- --------
----- - -------------------- - - ------------------------
----- ---- - -----------------
----- --------- - ----------------------

----- -------- - -
  ---- ----- -
    ------------
  -
  -------
-

----- --------- - --

-------------- - ----------------------
  ---------
  ---------
--
  1. 启动 GraphQL 服务,即可使用 Schema:

以上是使用 graphql-toolsgraphql-import 进行 GraphQL Schema 模块化的步骤及代码,使用这些工具可以很好地提高 Schema 的复用性以及维护性。

总结

模块化可以是代码更加清晰易懂,节约时间和精力,提高代码质量,每个模块是可以拆分和重组的, 模块化的结构简单易懂,另外,schema的增删该也更加方便。GraphQL Schema 模块化的方法有很多,以上只是其中几种,读者可以根据自己实际项目需求选择合适的方法来提高 GraphQL Schema 的维护性和复用性。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64f51751f6b2d6eab3dcf03d

纠错
反馈