GraphQL 是一种新兴的数据查询语言和 API 设计工具，它的出现让前端开发者可以更加高效和简洁地处理数据查询和操作。GraphQL 中的 Union 类型是一个非常重要且常用的概念，它可以让我们更加灵活和方便地处理不同类型的数据。
Union 类型概念
GraphQL 中的 Union 类型，也称为联合类型，是用于将多个类型组合在一起的机制。Union 类型表示了一个字段可以指向多个不同类型的对象，这些对象可能拥有不同的字段和返回值。
举个例子，假设我们有一个汽车销售平台，需要查询所有在售的汽车信息。我们定义一个 GraphQL 的查询接口，可以查询车辆的基本信息，包括型号、价格、颜色等等。不同的车辆类型可能有一些独特的属性，比如轿车有关于座位数的字段，而货车有关于载货量的字段。
在 GraphQL 中，我们可以用 Union 类型将所有的车辆类型组合成一个类型，然后在查询时指定 Union 类型即可。这样就可以方便地查询所有的车辆信息，同时还可以方便地添加新的车辆类型。
Union 类型语法
Union 类型在 GraphQL 中的语法非常简单，它只需要将多个类型名称用管道符 | 连接起来即可。例如：
union Vehicle = Car | Truck | SUV
上面的例子定义了一个名为 Vehicle 的 Union 类型，它可以指向 Car、Truck 或 SUV 这三个类型中的任何一个。
Union 类型示例
让我们通过一个具体的例子来说明 Union 类型的使用方法。假设我们有以下两个 GraphQL 的类型定义：
// javascriptcn.com 代码示例
type Book {
id: ID!
title: String!
author: String!
}
type Movie {
id: ID!
title: String!
director: String!
}这里定义了两个类型 Book 和 Movie，它们都有一个唯一标识符 id 和一个标题 title，但是 Book 有一个作者 author 字段，而 Movie 则有一个导演 director 字段。
我们可以使用 Union 类型将这两个类型组合起来，然后定义一个查询接口来查询它们：
union SearchItem = Book | Movie
type Query {
search(query: String!): [SearchItem]!
}上面的语法定义了一个名为 SearchItem 的 Union 类型，它可以指向 Book 或 Movie 这两种类型中的任何一个。
接下来，我们在 Query 中定义了一个名为 search 的查询接口，该接口接受一个查询字符串 query，返回一个 SearchItem 类型的数组，这个数组里面包含了所有匹配查询字符串的 Book 或 Movie 对象。
实现这个查询接口的代码可以如下所示：
// javascriptcn.com 代码示例
const SEARCH_DATA = [
{ type: 'book', id: '1', title: 'The Hitchhiker\'s Guide to the Galaxy', author: 'Douglas Adams' },
{ type: 'book', id: '2', title: 'Harry Potter and the Philosopher\'s Stone', author: 'J.K. Rowling' },
{ type: 'movie', id: '3', title: 'The Shawshank Redemption', director: 'Frank Darabont' },
{ type: 'movie', id: '4', title: 'The Godfather', director: 'Francis Ford Coppola' },
]
const resolvers = {
Query: {
search: (parent, { query }) => {
return SEARCH_DATA.filter(item => item.title.includes(query))
.map(item => {
if (item.type === 'book') {
return {
__typename: 'Book',
id: item.id,
title: item.title,
author: item.author,
}
} else if (item.type === 'movie') {
return {
__typename: 'Movie',
id: item.id,
title: item.title,
director: item.director,
}
}
})
},
},
SearchItem: {
__resolveType: (item) => {
return item.__typename
}
}
}上面的代码里面，我们定义了一个 SEARCH_DATA 常量，它代表了一个包含了多个 Book 和 Movie 对象的数组。在 resolvers 对象中，我们实现了 Query 中的 search 方法，它接受一个查询字符串 query，使用 filter 和 map 方法过滤出所有匹配查询字符串的对象，并根据类型构造对应的 SearchItem，然后返回 SearchItem 数组。
在 resolvers 对象中还实现了 SearchItem 类型的完整解析器，其中的 __resolveType 方法用于根据对象的 __typename 属性动态返回对应的类型。这个方法非常重要，因为它是 Union 类型的核心实现机制之一。只要有新的类型加入 Union 类型，我们只需要在这个方法中添加相应的分支逻辑即可。
Union 类型总结
Union 类型是 GraphQL 中非常实用的概念，它可以让我们更加灵活和方便地处理不同类型的数据。当我们需要查询多个不同类型的对象时，可以应用 Union 类型，它可以更加准确和方便地返回我们需要的数据。在实现 Union 类型时，我们需要注意类型定义和解析器实现，同时可以通过示例代码来加深理解和学习。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6535d8cd7d4982a6ebd7ff48