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 字段的例子：
-- -------------------- ---- -------
----- -
------------- ---------- -
--- -- ---- -
-----
------ -
----
-
-
--- -- ------ -
----
----- -
-----
-
-
--- -- --------- -
----
----- -
-----
------ -
----
-
-
-
-
-在上面的例子中，我们查询了 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 字段：
-- -------------------- ---- -------
----- -
-------- ------ -
------------- ---------- -
--- -- ---- -
-----
------ -
----
-
-
--- -- ------ -
----
----- -
-----
-
-
--- -- --------- -
----
----- -
-----
------ -
----
-
-
-
-
-
-在上面的例子中，我们查询了 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 字段。
-- -------------------- ---- ------- ---- ---- - --- --- ------ ------- ------- ------- ------------- --------- -------------- - ---- ------ - --- --- ----- ------- ------ ------- ------------- --------- -------------- - ---- --------- - --- --- ----- ------- ------ ------- ------------- --------- -------------- - ----- ------------ - ---- - ------ - --------- --------- ---------- - ------------- --------- -------------- - ---- ----- - -------- ----- ---- -
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c48f34add4f0e0fff18ed0