GraphQL 是一种用于构建 API 的查询语言，它可以让客户端精确地指定需要的数据，避免了传统 REST API 中的 over-fetching 和 under-fetching 问题。在 GraphQL 中，Union 和 Interface 是两种常用的类型定义方式，它们可以帮助我们更好地组织数据模型和查询语句。
Union 和 Interface 的区别
Union 和 Interface 都可以用于定义一组相关的类型，但它们之间有一些区别。
Interface
Interface 是一种抽象的类型定义方式，它可以定义一组字段和方法，但不会具体实现它们。它类似于面向对象中的接口，它定义了一组规范，具体的实现由实现类来完成。
例如，我们可以定义一个 Animal 接口，它包含 name 和 sound 两个字段：
interface Animal {
name: String!
sound: String!
}然后我们可以定义一个 Cat 类型，它实现了 Animal 接口：
type Cat implements Animal {
name: String!
sound: String!
breed: String!
}这样，我们就可以查询 Cat 类型的对象，并使用 Animal 接口中定义的字段和方法：
query {
cat {
name
sound
breed
}
}在这个查询中，我们可以看到 Cat 对象实现了 Animal 接口中定义的 name 和 sound 字段，同时还有自己特有的 breed 字段。
Union
Union 是一种类型定义方式，它可以将多个类型组合成一个类型。它类似于面向对象中的多态，它可以表示一个对象可能属于多个类型中的任意一个。
例如，我们可以定义一个 SearchResult 联合类型，它可以包含 Book 和 Movie 两种类型：
union SearchResult = Book | Movie
然后我们可以查询 SearchResult 类型的对象，并根据实际类型来处理：
// www.javascriptcn.com code example
query {
search(query: "GraphQL") {
... on Book {
title
author
}
... on Movie {
title
director
}
}
}在这个查询中，我们可以看到 SearchResult 类型包含了 Book 和 Movie 两种类型，我们使用 ... on 语法来判断实际类型并处理相应的字段。
Union 和 Interface 的实现方式
Interface
在 GraphQL 中，我们可以使用 interface 关键字来定义一个接口类型，然后使用 implements 关键字来实现它。
例如，我们可以定义一个 Animal 接口类型：
interface Animal {
name: String!
sound: String!
}然后我们可以定义一个 Cat 类型来实现它：
type Cat implements Animal {
name: String!
sound: String!
breed: String!
}在这个例子中，我们使用 implements 关键字来实现 Animal 接口类型，并定义了 Cat 类型的具体字段。
Union
在 GraphQL 中，我们可以使用 union 关键字来定义一个联合类型，然后使用管道符 | 来组合多个类型。
例如，我们可以定义一个 SearchResult 联合类型：
union SearchResult = Book | Movie
然后我们可以定义 Book 和 Movie 两种类型：
// www.javascriptcn.com code example
type Book {
title: String!
author: String!
}
type Movie {
title: String!
director: String!
}在这个例子中，我们使用 union 关键字来定义 SearchResult 联合类型，并使用管道符 | 来组合 Book 和 Movie 两种类型。
示例代码
下面是一个完整的示例代码，它演示了如何使用 Union 和 Interface 来定义 GraphQL 查询语句：
// www.javascriptcn.com code example
interface Animal {
name: String!
sound: String!
}
type Cat implements Animal {
name: String!
sound: String!
breed: String!
}
type Dog implements Animal {
name: String!
sound: String!
breed: String!
}
union Pet = Cat | Dog
type Query {
search(query: String!): [Pet!]!
}在这个示例中，我们定义了一个 Animal 接口类型，它包含 name 和 sound 两个字段。然后我们定义了 Cat 和 Dog 两种类型，它们都实现了 Animal 接口类型。
接着，我们使用 union 关键字来定义一个 Pet 联合类型，它包含 Cat 和 Dog 两种类型。
最后，我们定义了一个 search 查询，它接受一个字符串参数 query，并返回一个 Pet 联合类型的数组。在查询结果中，我们可以使用 ... on 语法来处理 Cat 和 Dog 两种类型的字段。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d57694a941bf7134a35b78