僅限客戶端資料

僅限客戶端資料（客戶端結構描述擴展）

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
}

• 在這個虛構的範例中，我們正在定義 2 個新的僅限客戶端類型，一個 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,
);

更新僅限客戶端資料

為了更新僅限客戶端資料，您可以在突變或訂閱更新程式內正常進行，或使用我們的基本元素來對儲存進行本機更新。

---

這個頁面實用嗎？

請協助我們透過以下方式讓網站更好 回答一些快速問題.