如何在 GraphQL 优雅的传递参数？-JavaScript中文网-JavaScript教程资源分享门户

GraphQL 是一种用于 API 的查询语言，它提供了一种更高效、更强大的 API 设计方式。在 GraphQL 中，查询和变更都是由客户端来定义的，而不是由服务端来定义的。这使得客户端可以精确地指定需要的数据，而不必依赖于服务端返回的固定结构。

在 GraphQL 中，如何传递参数是非常重要的。本文将介绍如何在 GraphQL 中优雅地传递参数，以及一些最佳实践和示例代码。

基本参数传递

在 GraphQL 中，参数传递是通过在查询或变更字段后添加括号来实现的。例如，假设我们有一个查询字段 user，它接受一个参数 id，则查询语句可以写成如下形式：

query {
  user(id: 123) {
    name
    email
  }
}

在服务端实现时，我们可以通过类似下面的代码来处理参数：

const resolvers = {
  Query: {
    user: async (parent, { id }, context, info) => {
      const user = await getUserById(id)
      return user
    }
  }
}

在这个例子中，user 查询的参数 id 是通过解构语法从第二个参数中获取的。

默认参数值

有时候，我们需要为参数提供默认值，以便在客户端未提供该参数时使用。在 GraphQL 中，可以通过在参数定义中使用 = 来指定默认值。例如：

const resolvers = {
  Query: {
    users: async (parent, { limit = 10 }, context, info) => {
      const users = await getUsers({ limit })
      return users
    }
  }
}

在这个例子中，users 查询的参数 limit 有一个默认值 10。如果客户端未提供 limit 参数，则使用默认值。

多参数传递

当需要传递多个参数时，我们可以通过使用输入对象类型来组织参数。例如，假设我们有一个查询字段 search，它接受多个参数 query、type 和 limit，则查询语句可以写成如下形式：

query {
  search(input: { query: "graphql", type: "repo", limit: 10 }) {
    items {
      name
      description
    }
  }
}

在服务端实现时，我们可以定义一个输入对象类型 SearchInput，并在查询字段中使用该类型来组织参数：

// www.javascriptcn.com code example
const typeDefs = gql`
  input SearchInput {
    query: String!
    type: String!
    limit: Int
  }

  type SearchItem {
    name: String!
    description: String
  }

  type SearchResults {
    items: [SearchItem!]!
  }

  type Query {
    search(input: SearchInput!): SearchResults!
  }
`

const resolvers = {
  Query: {
    search: async (parent, { input }, context, info) => {
      const { query, type, limit } = input
      const items = await search({ query, type, limit })
      return { items }
    }
  }
}

在这个例子中，我们定义了一个输入对象类型 SearchInput，它包含三个参数 query、type 和 limit。在查询字段 search 中，我们使用 SearchInput 类型来组织参数。在服务端实现中，我们可以通过解构语法从 input 参数中获取 query、type 和 limit 参数。

参数类型检查

在 GraphQL 中，参数类型检查是非常重要的。它可以帮助我们在客户端和服务端之间建立更强的类型安全性，并防止出现意外的错误。在 GraphQL 中，可以使用 GraphQLNonNull 和 GraphQLScalarType 等类型来定义参数类型。例如，假设我们有一个查询字段 user，它接受一个非空的字符串类型参数 id，则查询语句可以写成如下形式：

query {
  user(id: "123") {
    name
    email
  }
}

在服务端实现时，我们可以通过使用 GraphQLNonNull 和 GraphQLString 等类型来定义参数类型：

// www.javascriptcn.com code example
const typeDefs = gql`
  type User {
    id: ID!
    name: String!
    email: String!
  }

  type Query {
    user(id: ID!): User!
  }
`

const resolvers = {
  Query: {
    user: async (parent, { id }, context, info) => {
      const user = await getUserById(id)
      return user
    }
  }
}

在这个例子中，我们使用 GraphQLNonNull 和 GraphQLString 等类型来定义参数类型。id 参数必须是非空的字符串类型，否则会返回错误。

参数传递最佳实践

在 GraphQL 中，参数传递是非常灵活的。但是，为了保持代码的可读性和可维护性，我们需要遵循一些最佳实践。

参数命名

参数命名应该清晰、简洁、易于理解。参数名应该使用小写字母和下划线，例如 search_input。

参数类型

参数类型应该尽可能地使用 GraphQL 内置类型。如果必须使用自定义类型，请使用输入对象类型。

参数默认值

参数默认值应该尽可能地使用服务端默认值，而不是在客户端指定默认值。这可以减少客户端代码的复杂性。

参数限制

参数限制应该尽可能地在服务端进行处理。例如，如果需要限制查询结果的数量，应该在服务端实现中使用 limit 参数，而不是在客户端实现中使用 slice 函数。

结语

在 GraphQL 中，参数传递是非常重要的。本文介绍了如何在 GraphQL 中优雅地传递参数，以及一些最佳实践和示例代码。希望这篇文章能够帮助你更好地理解 GraphQL 的参数传递方式，并在实际项目中应用它们。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d2b9fea941bf71345541fb

如何在 GraphQL 优雅的传递参数？