客户端专用数据

客户端专用数据 (客户端模式扩展)

Relay 提供了通过客户端模式扩展来扩展客户端（即浏览器）上的 GraphQL 模式的能力，以便对仅需要在客户端创建、读取和更新的数据进行建模。这对于向从服务器获取的数据添加少量信息或完全建模客户端特定状态以由 Relay 存储和管理很有用。

客户端模式扩展允许您修改模式上的现有类型（例如通过向类型添加新字段），或创建仅在客户端存在的全新类型。

扩展现有类型

要扩展现有类型，请将 .graphql 文件添加到相应的源代码（--src）目录中

extend type Comment {
  is_new_comment: Boolean
}

• 在这个示例中，我们使用 extend 关键字扩展现有类型，并将新字段 is_new_comment 添加到现有的 Comment 类型，我们将在组件中读取它，并在必要时使用正常的 Relay API 更新它；您可以想象，我们可以使用此字段来为新评论呈现不同的视觉效果，并且可以在创建新评论时设置它。

添加新类型

您可以使用相同的常规 GraphQL 语法定义类型，方法是在 html/js/relay/schema/ 中的 .graphql 文件中定义它

# You can define more than one type in a single file
enum FetchStatus {
  FETCHED
  PENDING
  ERRORED
}


type FetchState {
  # You can reuse client types to define other types
  status: FetchStatus

  # You can also reference regular server types
  started_by: User!
}

extend type Item {
  # You can extend server types with client-only types
  fetch_state: FetchState
}

• 在这个人为的示例中，我们定义了两个新的客户端专用类型，一个 enum 和一个常规的 type。请注意，它们可以像往常一样互相引用，并引用常规的服务器定义类型。还要注意，我们可以扩展服务器类型并添加属于我们的客户端专用类型的字段。
• 如前所述，我们将能够通过 Relay API 以常规方式读取和更新此数据。

读取客户端专用数据

我们可以在片段或查询中选择客户端专用数据以进行读取，就像往常一样

const data = *useFragment*(
  graphql`
    fragment CommentComponent_comment on Comment {

      # We can select client-only fields as we would any other field
      is_new_comment

      body {
        text
      }
    }
  `,
  props.user,
);

更新客户端专用数据

要更新客户端专用数据，您可以像往常一样在突变或订阅更新程序中执行此操作，或者使用我们的基元执行对存储的本地更新。

---

此页面是否有用？

通过以下方式帮助我们使网站变得更好 回答几个快速问题.