GraphQL 是一个用于 API 的查询语言和运行时环境，它可以让客户端精确地获取需要的数据而不浪费带宽。在 GraphQL 查询中，Fragment 是一个非常实用的工具，它可以帮助我们更好地组织和重用查询代码。本文将介绍 Fragment 的使用技巧，帮助你更好地利用 GraphQL 进行前端开发。
什么是 Fragment
Fragment 是 GraphQL 查询中的一个重要概念，它允许我们将查询代码分解为多个部分并重用它们。Fragment 可以理解为一个命名的查询，它包含了一些字段和类型定义。我们可以在查询中使用 Fragment 来引用这些字段和类型定义，从而避免重复书写代码。
下面是一个简单的 Fragment 示例：
fragment UserFields on User {
id
name
email
}
query GetUser {
user(id: "123") {
...UserFields
}
}在这个示例中，我们定义了一个名为 UserFields 的 Fragment，它包含了 User 类型的 id、name 和 email 字段。然后我们在查询中使用 ...UserFields 来引用这个 Fragment，从而避免了重复书写相同的字段。
如何使用 Fragment
Fragment 可以在查询中任何地方使用，包括 query、mutation 和 subscription。使用 Fragment 的步骤如下：
定义 Fragment：使用
fragment关键字定义一个 Fragment，指定 Fragment 名称和类型定义。编写查询：编写查询时，可以使用
...FragmentName来引用 Fragment。
下面是一个更复杂的示例，展示了如何使用 Fragment 来重用查询代码：
fragment UserFields on User {
id
name
email
}
query GetUsers {
allUsers {
...UserFields
}
}
query GetActiveUsers {
allUsers(filter: { isActive: true }) {
...UserFields
}
}在这个示例中，我们定义了一个名为 UserFields 的 Fragment，它包含了 User 类型的 id、name 和 email 字段。然后我们在 GetUsers 和 GetActiveUsers 查询中使用 ...UserFields 来引用这个 Fragment，从而重用了查询代码。
Fragment 的嵌套使用
在 GraphQL 查询中，Fragment 可以嵌套使用，这样可以更好地组织和重用查询代码。下面是一个示例：
fragment CommentFields on Comment {
id
text
author {
...UserFields
}
}
fragment UserFields on User {
id
name
email
}
query GetPost {
post(id: "123") {
title
content
comments {
...CommentFields
}
}
}在这个示例中，我们定义了两个 Fragment：CommentFields 和 UserFields。然后我们在 CommentFields Fragment 中使用了 ...UserFields 来引用 UserFields Fragment，从而嵌套使用了 Fragment。
Fragment 的动态使用
在 GraphQL 查询中，Fragment 也可以动态使用，这样可以根据不同的条件选择不同的 Fragment。下面是一个示例：
fragment UserFields on User {
id
name
email
}
fragment AdminFields on User {
id
name
email
role
}
query GetUser($id: ID!, $isAdmin: Boolean!) {
user(id: $id) {
...UserFields
...AdminFields @include(if: $isAdmin)
}
}在这个示例中，我们定义了两个 Fragment：UserFields 和 AdminFields。然后我们在查询中使用了 ...UserFields 和 ...AdminFields 来引用这两个 Fragment。在 AdminFields 中，我们使用了 @include 指令来根据 $isAdmin 变量的值来选择是否包含这个 Fragment。
总结
Fragment 是 GraphQL 查询中的一个重要概念，它可以帮助我们更好地组织和重用查询代码。在查询中使用 Fragment 的步骤如下：
定义 Fragment：使用
fragment关键字定义一个 Fragment，指定 Fragment 名称和类型定义。编写查询：编写查询时，可以使用
...FragmentName来引用 Fragment。
Fragment 还可以嵌套使用和动态使用，这样可以更好地适应不同的业务场景。在实际开发中，合理使用 Fragment 可以提高代码的可维护性和可重用性，是一个非常实用的技巧。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658a68adeb4cecbf2df9803a