如何创建可重用的 GraphQL 模块-JavaScript中文网-JavaScript教程资源分享门户

GraphQL 是一种用于 API 的查询语言，它专为前端的数据需求而设计。通过使用 GraphQL，前端可以请求它所需要的特定数据，而不必过度获取和处理不必要的数据。在本文中，我们将介绍如何创建可重用的 GraphQL 模块，以加快前端开发的速度和效率。

1. GraphQL 模块的结构

为了创建可重用的 GraphQL 模块，我们必须首先理解模块的结构。一个典型的 GraphQL 模块应该包含以下结构：

typeDefs 含有 GraphQL 的 schema，声明了所有的 types，queries 和mutations。
resolvers 是一个对象，它为每个类型字段提供符合 schema 的解析函数。
index.js，它是模块的入口点，需要导出一个 GraphQL 对象。

在 schema 中，我们应该将接口分解成可重用的小组件，每个组件代表单个业务和数据集合。例如，我们可以将“用户管理”分解成“用户”，“角色”，“权限”和“用户组”等组件。每个组件都应该有一个专用的文件夹来存储 schema 和 resolver。

2. 使用抽象类型进行概括

使用抽象类型是创建可重用的 GraphQL 模块的有效技巧之一。通过使用抽象类型，我们可以指定一个实例满足的类型，而不必指定该实例的确切类型。这样做可以使我们将一个模块的实现与其他依赖于该模块的模块解耦。在 GraphQL 中，我们使用 interface 来指定一个抽象类型。

例如，我们可以定义一个 IUser 接口，它将会被其他业务组件所引用，而不必考虑用户对象的确切类型。该接口应该声明访问用户对象的方法和属性，如下所示：

interface IUser {
  id: ID!
  name: String!
  email: String!
  avatar: String
}

通过将 GraphQL 模块中的所有实现类型作为 IUser 的实现，我们可以创建一个可重用的用户组件，该组件可以与任何其他组件集成。

3. 定义可重用的输入类型

另一个常见的技巧是定义可重用的输入类型，以增加模块的可重用性。由于 GraphQL 中的输入类型是可重用的构造，因此我们可以在不同的查询和 mutations 中使用它们。这样做可以减少代码的重复，并有助于减少错误。

例如，我们可以定义一个 UserInput 输入类型，它将被用于更新和创建用户。该类型将具有标准的用户字段，如下所示：

input UserInput {
  name: String!
  email: String!
  avatar: String
}

使用该类型，我们可以在多个 mutations 中创建和更新用户对象，而不必每次都定义一个新的输入类型。

4. 创建可重用的 Resolver 函数

要创建可重用的 Resolver 函数，我们需要保持我们的 Resolver 函数纯粹，这意味着我们不应该引用特定的依赖项或具体实现。相反，我们应该尽可能使用参数和输入，并且返回特定类型的值。

例如，假设我们有一个 userResolver.js 的文件来处理所有用户对象。我们可以使用以下方式来创建一个可重用的 Resolver 函数：

// javascriptcn.com 代码示例
const getUsers = async ({ limit = 10, offset = 0 }) => {
  const users = await User.findAll({ limit, offset })
  return users
}

module.exports = {
  Query: {
    getUsers
  }
}

该 Resolver 函数采用一个可选的参数对象，并以特定的格式返回一个用户数组。这使我们可以在多个查询中使用 getUsers 函数，而不必编写新的 Resolver 函数。

5. 在模块中进行测试

最后，我们需要在我们的模块中进行测试，以确保它能够正常工作。在测试中，我们需要使用模拟数据以及各种查询和 mutations。通过使用测试，我们可以快速了解代码错误并更快地发现错误。

例如，我们可以创建一个简单的用户查询来测试 getUsers 函数：

query {
  users {
    id
    name
    email
  }
}

我们可以使用 Jest 或其他测试框架来编写测试，并确保我们的组件在提供期望的结果时正常工作。

总结

创建可重用的 GraphQL 模块是前端开发人员的一项重要工作。通过使用抽象类型、可重用的输入类型和重用 Resolver 函数，我们可以提高开发效率和代码质量。我们还应该方便地测试我们的组件，以确保它们符合预期。通过使用本文中提到的技巧，我们可以创建一些可重用的组件，以加速我们的开发流程。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6545d0217d4982a6ebf6fba3