GraphQL 是一种用于 API 的查询语言和类型系统,它被广泛用于构建现代 Web 应用程序。在使用 GraphQL 进行开发时,经常需要处理大量的 GraphQL 查询和类型定义。因此,管理 GraphQL 代码可以变得非常棘手,但有了 npm 包 graphql-import,我们可以轻松地组织和管理 GraphQL 代码。
安装
你可以通过 NPM 或 Yarn 安装 graphql-import
:
npm install graphql-import
yarn add graphql-import
使用
导入文件
一个简单的例子是:假设我们有两个 GraphQL 文件:一个包含类型定义,另一个包含查询和 mutation。
schema.graphql
- 包含类型定义queries.graphql
- 包含查询和 mutation
我们可以使用 graphql-import
将这些文件导入到一个文件中:
# import * from './schema.graphql' # import * from './queries.graphql'
这里我们使用 import *
语法来导入所有内容。你也可以选择性地导入指定的部分:
# import { User } from './schema.graphql' # import { createUser, updateUser } from './mutations.graphql'
在 Node.js 应用中使用
你可以将导入后的内容传递给 makeExecutableSchema
函数(由 graphql-tools
提供),以创建一个可执行的 GraphQL schema:
-- -------------------- ---- ------- ----- - -------------------- - - ------------------------- ----- - ------------ - - -------------------------- ----- -------- - --------------------------------- ----- --------- - --- ----- ------ - ---------------------- --------- --------- ---
在浏览器应用中使用
如果你正在开发一个浏览器应用程序,并且想要使用 graphql-import
,则需要使用 Babel 或 Webpack 进行转译。这里有一个 Babel 的配置示例:
-- -------------------- ---- ------- - ---------- - -------------------- --------------------- -- ---------- - ---------------- - -
然后在你的代码中导入 GraphQL 文件:
-- -------------------- ---- ------- ------ - ------------ - ---- ----------------- ------ - -------------------- - ---- ---------------- ----- -------- - --------------------------------- ----- --------- - --- ----- ------ - ---------------------- --------- --------- ---
示例代码
这里是一个完整的示例代码,展示了如何使用 graphql-import
导入和组织 GraphQL 代码。
假设我们有以下目录结构:
├── schema.graphql ├── queries.graphql ├── mutations.graphql └── server.js
schema.graphql
包含类型定义:
-- -------------------- ---- ------- ---- ---- - --- --- ----- ------- - ---- ----- - ------ ------- - ---- -------- - ---------------- --------- ----- -------------- ---- ----- --------- ----- -
queries.graphql
包含查询:
# import * from './schema.graphql' type Query { users: [User]! }
mutations.graphql
包含 mutation:
# import * from './schema.graphql' type Mutation { createUser(name: String!): User! updateUser(id: ID!, name: String!): User! }
在 server.js
中,我们可以使用 graphql-import
导入和组织这些文件:
-- -------------------- ---- ------- ----- - -------------------- - - ------------------------- ----- - ------------ - - -------------------------- ----- -------- - ---------------------------------- ----- --------- - --- ----- ------ - ---------------------- --------- --------- ---
结论
通过使用 graphql-import
,我们可以轻松地组织和管理 GraphQL 代码。它使得代码可读性更高,易于维护和测试。在 Node.js 或浏览器应用程序中使用 graphql-import
非常方便,并且可以大幅提高
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/42604