在 GraphQL 中使用 Union 类型和接口-JavaScript中文网-JavaScript教程资源分享门户

GraphQL 是一种用于 API 的查询语言，它提供了一种强大的方式来描述 API 的数据。GraphQL 在前端领域中越来越受欢迎，因为它可以帮助我们更好地管理数据。在 GraphQL 中，我们可以使用 Union 类型和接口来更好地组织数据，本文将详细介绍如何在 GraphQL 中使用 Union 类型和接口。

Union 类型

Union 类型是 GraphQL 中的一种类型，它可以将多个类型组合在一起。Union 类型可以用来表示一个字段可能返回多种不同类型的值。例如，我们可以定义一个 SearchResult 的 Union 类型，它可以包含多个搜索结果类型：

union SearchResult = Book | Author | Publisher

在上面的例子中，我们定义了一个 SearchResult 的 Union 类型，它可以包含 Book、Author 和 Publisher 类型。这意味着，当我们查询 SearchResult 字段时，它可能返回 Book、Author 或 Publisher 类型的值。

下面是一个查询 SearchResult 字段的例子：

query {
  search(query: "GraphQL") {
    ... on Book {
      title
      author {
        name
      }
    }
    ... on Author {
      name
      books {
        title
      }
    }
    ... on Publisher {
      name
      books {
        title
        author {
          name
        }
      }
    }
  }
}

在上面的例子中，我们查询了 search 字段，并在查询结果中使用了 ... on 语法来指定每个结果的类型。如果 search 字段返回的结果是 Book 类型，我们就可以访问 title 和 author 字段；如果是 Author 类型，我们就可以访问 name 和 books 字段；如果是 Publisher 类型，我们就可以访问 name、books 和 author 字段。

接口

接口是另一种在 GraphQL 中组织数据的方式。与 Union 类型不同，接口只能定义一组共同的字段，而不能包含不同的类型。接口可以用来描述一组相关的对象，这些对象可能有不同的实现。例如，我们可以定义一个 Searchable 的接口，它包含一个 search 字段：

interface Searchable {
  search(query: String!): [SearchResult]
}

在上面的例子中，我们定义了一个 Searchable 的接口，它包含一个 search 字段，该字段接受一个查询字符串，并返回一个 SearchResult 类型的数组。

现在，我们可以定义一个 Book 类型，它实现了 Searchable 接口：

type Book implements Searchable {
  title: String!
  author: Author!
  search(query: String!): [SearchResult]
}

在上面的例子中，我们定义了一个 Book 类型，并使用 implements 关键字来指定它实现了 Searchable 接口。我们还可以定义一个 Author 类型和一个 Publisher 类型，它们也实现了 Searchable 接口。

现在，我们可以查询 Book 类型的 search 字段：

query {
  book(id: "123") {
    search(query: "GraphQL") {
      ... on Book {
        title
        author {
          name
        }
      }
      ... on Author {
        name
        books {
          title
        }
      }
      ... on Publisher {
        name
        books {
          title
          author {
            name
          }
        }
      }
    }
  }
}

在上面的例子中，我们查询了 Book 类型的 search 字段，并在查询结果中使用了 ... on 语法来指定每个结果的类型。如果 search 字段返回的结果是 Book 类型，我们就可以访问 title 和 author 字段；如果是 Author 类型，我们就可以访问 name 和 books 字段；如果是 Publisher 类型，我们就可以访问 name、books 和 author 字段。

总结

在 GraphQL 中，Union 类型和接口可以帮助我们更好地组织数据。Union 类型可以用来表示一个字段可能返回多种不同类型的值，而接口可以用来描述一组相关的对象，这些对象可能有不同的实现。通过使用 Union 类型和接口，我们可以更好地管理数据，并提供更好的查询体验。

示例代码

在下面的示例代码中，我们定义了 Book、Author 和 Publisher 类型，以及 SearchResult 的 Union 类型和 Searchable 的接口。我们还定义了一个简单的查询，用于查询 Book 类型的 search 字段。

type Book {
  id: ID!
  title: String!
  author: Author!
  search(query: String!): [SearchResult]
}

type Author {
  id: ID!
  name: String!
  books: [Book]!
  search(query: String!): [SearchResult]
}

type Publisher {
  id: ID!
  name: String!
  books: [Book]!
  search(query: String!): [SearchResult]
}

union SearchResult = Book | Author | Publisher

interface Searchable {
  search(query: String!): [SearchResult]
}

type Query {
  book(id: ID!): Book
}

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