如何在 GraphQL 中使用自定义指令-JavaScript中文网-JavaScript教程资源分享门户

GraphQL 是一种现代化的查询语言，可以与各种编程语言和数据存储一起使用。GraphQL 的可扩展性和灵活性使其成为开发者最首选的查询语言。自定义指令（Custom directives）是 Graphql 中重要的一个特性。本文将详细介绍如何在 GraphQL 中使用自定义指令。

什么是自定义指令？

自定义指令是 GraphQL 中用于自定义函数功能的一种方法。自定义指令是一些元数据，可以添加到 GraphQL 标量、类型、接口、联合类型和输入类型等上。自定义指令可以影响类型的解析器，进而影响查询、变异和订阅等操作。

自定义指令，本质上是一个 JavaScript 函数，GraphQL Schema 会自动解析该函数并将其添加到可用指令中。自定义指令一般具有以下几个参数或者属性：

name：指令的唯一名称
description：指令的描述，解释该指令的作用
locations：该指令可以添加的 GraphQL 元素，例如：字段、参数、片段等等
args：指令使用时支持的参数列表，参数包括名字，类型，以及默认值等等
resolve：指令的自定义处理方法，根据需要处理不同的业务逻辑

如何定义自定义指令？

我们可以使用 GraphQL 自带的 GraphQLDirective 类来定义自定义指令。GraphQLDirective 是 GraphQL 中用于表示指令的一个对象。我们可以通过以下代码定义一个简单的可执行的指令：

// javascriptcn.com 代码示例
const { GraphQLDirective } = require('graphql');

const MyDirective = new GraphQLDirective({
  name: 'MyDirective',
  locations: ['FIELD', 'FRAGMENT_SPREAD'],
  args: {
    foo: {
      type: GraphQLString,
      description: 'A argument',
      defaultValue: 'bar'
    }
  },
});

在上述代码中，我们定义了一个名为 MyDirective 的自定义指令，该指令能够在 FIELD 和 FRAGMENT_SPREAD 的位置使用。该指令还支持一个名为 foo 的参数，该参数是一个字符串类型，具有默认值为“bar”。指令对象还包括其他属性，例如描述、是否弃用等。

如何在 GraphQL Query 中使用自定义指令？

使用自定义指令时，需要为查询的字段添加特定的指令标记。GraphQL提供了 @ 指令符号来实现这个过程。在一个 GraphQL 查询中使用指令，我们只需要将指令添加到特定的字段中。如下面的示例代码所示，我们使用了 MyDirective 指令：

query GetData {
  post(id: "632") {
    id
    title
    content @MyDirective(foo: "baz")
  }
}

上述代码中，我们调用了 post 查询，并且为该查询中的 content 部分添加 MyDirective 指令。该指令将传递一个名为 foo 的参数，并将其设置为值“baz”。

自定义指令的优点

使用自定义指令，可以实现以下几个优点：

重复使用：自定义指令可以在不同查询中重复使用，使得代码更加简洁。开发者可以定义在多个 GraphQL Schema 中使用的自定义指令。
动态扩展：自定义指令是指令元数据的一种形式，可以动态扩展，以支持更多的处理逻辑。在某些场景下，指令的处理行为可能随着时间而变化。此时，可以通过修改指令的实现来实现新的行为，而无需修改相关的查询。
更高级的查询处理：自定义指令可以作为一种高级查询处理机制，帮助开发者更好的掌握 GraphQL 查询语言。

自定义指令的缺点

虽然自定义指令是一种很好的 GraphQL 扩展机制，但使用自定义指令也存在一些缺点，例如：

学习曲线：自定义指令的使用需要一些额外的学习成本，需要了解GraphQL指令运作方式，并掌握对 GraphQL 指令进行编程实现的技能。
安全：自定义指令在不同的应用场景中可能有不同的风险级别，比如：在某些场景中，自定义指令可能会导致GraphQL操作的安全问题。

自定义指令的示例

以下是一个简单的示例，演示如何定义和使用自定义指令：

// javascriptcn.com 代码示例
const { GraphQLDirective } = require('graphql');

const SayDirective = new GraphQLDirective({
  name: 'say',
  args: {
    message: {
      type: GraphQLString
    }
  },
  locations: ['FIELD'],
  description: 'Adds a message to a field',
  resolve: (next, source, args, context) => {
    const message = args.message || 'Hello, world!';
    const output = next();
    return `${output} (say: ${message})`;
  }
});

const typeDefs = `
  type Query {
    message: String @say(message: "Welcome!")
  }
`;

const resolvers = {
  Query: {
    message: (parent, args, context) => {
      return 'Hello, world!';
    }
  }
};

上述代码中，我们定义了自定义指令 SayDirective。该指令接受一个名为 message 的字符串参数，并可用于在查询中的字段中生成附加信息。在上面的实例代码中，我们为一个名为 “message” 的查询字段添加了 SayDirective 指令。当我们执行该查询时，该指令将打印出“Hello，world!（say：Welcome!”），这里的信息是自定义指令 SayDirective 中的处理逻辑所添加的。

总结

本文介绍了自定义指令（custom directive）在 GraphQL 中的应用，包括自定义指令的定义、查询字段中的自定义指令的使用、自定义指令的优点和缺点、以及自定义指令的示例。在实际应用中，自定义指令可以帮助开发者更好地实现 GraphQL 数据查询和分析，同时提升查询时的代码重用率和代码结构的简洁性。

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