5. Fragments

在 GraphQL 中，fragments 是组织和复用公共字段的方式。比如，我们需要获取预约挂号记录中一些患者的信息。这么写query:

{
  arunoda: patient(name: "arunoda") {
    _id,
    identifier,
    name,
  },
  pahan: patient(name: "pahan") {
    _id,
    identifier,
    name,
  },
  indi: patient(name: "indi") {
    _id,
    identifier,
    name,
  }
}

上面 patient 中的字段被写了很多次。我们可以使用 Fragments 来避免这样的写法。 让我们看一下如何使用 Fragments。

以上代码，相同组的代码被重写了很多次。在这里使用 Fragments 可以解决字段复用的问题。以下代码是用 Fragments 重写的 query。

{
  arunoda: patient(name: "arunoda") {
    ...patientInfo
  },
  pahan: patient(name: "pahan") {
    ...patientInfo
  },
  indi: patient(name: "indi") {
    ...patientInfo
  }
}

fragment patientInfo on patient {
    _id,
    identifier,
    name,
}

在这里，我们基于 patient 定义了 fragment，而 fragment 包含我们想要的字段。正如上面的query，我们可以通过展开符（...），来使用 fragment 中的字段。

混合 fragment 和 字段

我们可以将 fragment 和 字段 混合在一起。

{
  indi: patient(name: "indi") {
    ...requiredPatientInfo
    identifier
  }
}

fragment requiredPatientInfo on patient {
    _id,
    name,
}

这里我们使用 fragment 来获取 _id 和 name，同时定义了 identifier 字段。

这里有个问题，如果你再次定义 fragment 中已经存在的字段，会发生什么？

{
  indi: patient(name: "indi") {
    ...requiredPatientInfo,
    identifier,
    _id // this is already defined in the fragment
  }
}

答案是: Query executed without any issues.

有嵌套字段的 fragments

在 fragment 中，我们同样可以定义嵌套字段。fragments 非常有用，看以下例子:

{
  appointmentRequest1: appointmentRequest(_id: "03390abb5570ce03ae524397d215713b") {
    ...appointmentRequestInfo
  },
  appointmentRequest2: appointmentRequest(_id: "0176413761b289e6d64c2c14a758c1c7") {
    ...appointmentRequestInfo
  }
}

fragment appointmentRequestInfo on appointmentRequest {
    _id,
    type,
    reason,
    status,
    patient {
      id,
      identifier,
      name,
      confirmStatus
    },
    practitioner {
      id,
      identifier,
      name,
      confirmStatus 
    }
  } 
}

在这个 query 中，我们使用了有嵌套字段的 fragment，它请求了带有患者和医生的两条记录，而不是去写重复字段。

fragments 嵌套 fragments

你可以在其他 fragments 中使用 fragments。

{
  appointmentRequest1: appointmentRequest(_id: "03390abb5570ce03ae524397d215713b") {
    ...appointmentRequestInfo
  },
  appointmentRequest2: appointmentRequest(_id: "0176413761b289e6d64c2c14a758c1c7") {
    ...appointmentRequestInfo
  }
}

fragment appointmentRequestInfo on appointmentRequest {
    _id,
    type,
    reason,
    status,
    patient {
      ...patientInfo

    }
  } 
}
fragment patientInfo on patient {
  _id,
  name,
  identifier {
    ...identifierInfo
  }
}

fragment identifierInfo on identifier {
  cardType,
  cardNo,
  cardName
}

这里我们在 appointmentRequestInfo fragment 中使用 patientInfo fragment。 我们也可以这样改进 query:

{
  appointmentRequest1: appointmentRequest(_id: "03390abb5570ce03ae524397d215713b") {
    ...appointmentRequestInfo
  },
  appointmentRequest2: appointmentRequest(_id: "0176413761b289e6d64c2c14a758c1c7") {
    ...appointmentRequestInfo
  }
}

fragment appointmentRequestInfo on appointmentRequest {
    _id,
    type,
    reason,
    status,
      ...patientInfo
  } 
}
fragment patientInfo on patient {
  _id,
  name,
  identifier {
    ...identifierInfo
  }}

fragment identifierInfo on identifier {
  cardType,
  cardNo,
  cardName
}

fragment patientInfo on Haspatient {
  patient {
    _id,
    name
  }
}

为了做到这些，我们会在后面不同的课程中学习接口。

最后

现在你已经很好地理解了 fragments 以及我们如何使用 GraphQL queries。你也可以使用带有 fragments 的 mutations。因为 mutations 只是 queries 的变形。

当我们谈论如何在客户端使用 GraphQL 时，fragments 扮演着重要的角色。我稍后会谈论更多关于其重要性的内容。