useRefetchableFragment

useRefetchableFragment

當您想要使用不同的資料擷取並重新渲染片段時，可以使用 useRefetchableFragment

import type {CommentBody_comment$key} from 'CommentBody_comment.graphql';

const React = require('React');

const {graphql, useRefetchableFragment} = require('react-relay');


type Props = {
  comment: CommentBody_comment$key,
};

function CommentBody(props: Props) {
  const [data, refetch] = useRefetchableFragment(
    graphql`
      fragment CommentBody_comment on Comment
      @refetchable(queryName: "CommentBodyRefetchQuery") {
        body(lang: $lang) {
          text
        }
      }
    `,
    props.comment,
  );

  return (
    <>
      <p>{data.body?.text}</p>
      <Button
        onClick={() => {
          refetch({lang: 'SPANISH'}, {fetchPolicy: 'store-or-network'})
        }}
      >
        Translate Comment
      </Button>
    </>
  );
}

module.exports = CommentBody;

引數

• fragment：使用 graphql 樣板文字指定的 GraphQL 片段。這個片段必須具有 @refetchable 指令，否則使用它會拋出錯誤。@refetchable 指令只能新增至「可重新擷取」的片段，也就是在 Viewer 或 Query 類型，或實作 Node 的類型上宣告的片段（例如，具有 id 且能透過其 id 欄位查詢的類型）。如需更多詳細資訊，請參閱graphql 伺服器規格章節。
  • 請注意，您不需要自己手動指定重新擷取查詢。@refetchable 指令會使用指定的 queryName 自動產生查詢。這也會為查詢產生 Flow 類型，可從產生的檔案匯入：<queryName>.graphql.js。
• fragmentReference：片段參考是一個不透明的 Relay 物件，Relay 用於從儲存空間讀取片段的資料；更具體來說，它包含應該從哪個特定物件執行個體讀取資料的相關資訊。
  • 片段參考的類型可以從產生的 Flow 類型（從檔案 <fragment_name>.graphql.js）匯入，並且可用於宣告您的 Props 的類型。片段參考類型的名稱將是：<fragment_name>$key。我們使用我們的lint 規則來強制片段參考 prop 的類型被正確宣告。

傳回值

包含下列值的元組

• [0] data：包含已從 Relay 儲存空間讀取的資料的物件；物件符合指定的片段形狀。
  • 資料的 Flow 類型也將符合此形狀，並包含衍生自 GraphQL Schema 的類型。
• [1] refetch：用於使用可能的新變數集重新擷取片段的函式。
  • 引數
    • variables：包含要用於擷取 @refetchable 查詢的新變數值集的物件。
      • 這些變數需要符合片段內參照的 GraphQL 變數。
      • 如果傳遞給 useRefetchableFragment 的片段索引鍵是選用的，則必須傳遞所有非選用變數，包括物件的 ID，因為 Relay 可能沒有任何現有變數可重複使用。
      • 如果片段索引鍵是非選用的，則只需要指定要針對重新擷取要求變更的變數；此輸入中省略的片段所參照的任何變數都會回退為使用原始父查詢中指定的值。因此，舉例來說，若要使用與原始擷取時完全相同的變數重新擷取片段，您可以呼叫 refetch({})。
      • 同樣地，如果片段索引鍵是非選用的，則為 $id 變數傳遞 id 值是選用的，除非片段想要使用不同的 id 重新擷取。在重新擷取不可為 null 的 @refetchable 片段時，Relay 將會知道已渲染物件的 ID。
    • options：[選用] 選項物件
      • fetchPolicy：決定是否應使用快取資料，以及何時根據可用的快取資料傳送網路要求。如需完整規格，請參閱擷取原則章節。
      • onComplete：會在重新擷取要求完成時呼叫的函式，包括任何增量資料負載。
  • 傳回值
    • disposable：包含 dispose 函式的物件。呼叫 disposable.dispose() 將會取消重新擷取要求。
  • 行為
    • 使用一組新的變數呼叫 refetch 將會使用新提供的變數再次擷取片段。請注意，您需要提供的變數僅是片段內參照的變數。在此範例中，這表示透過將新值傳遞給 lang 變數，來擷取目前渲染的註解的翻譯內文。
    • 呼叫 refetch 將會重新渲染您的元件，並且可能會導致它暫停，這取決於指定的 fetchPolicy 以及快取資料是否可用，或者是否需要傳送並等待網路要求。如果重新擷取導致元件暫停，則您需要確保有 Suspense 邊界包覆此元件。
    • 如需有關 Suspense 的更多詳細資訊，請參閱我們的使用 Suspense 的載入狀態指南。

行為

• 該元件會自動訂閱片段資料的更新：如果此特定 User 的資料在應用程式中的任何位置更新（例如，透過擷取新資料或變更現有資料），則該元件會自動使用最新的更新資料重新渲染。
• 如果遺失該特定片段的任何資料，且父查詢目前正在擷取該資料，則該元件將會暫停。
  • 如需有關 Suspense 的更多詳細資訊，請參閱我們的使用 Suspense 的載入狀態指南。

與 RefetchContainer 的差異

• 在此 API 中不再需要指定重新擷取查詢，因為它會透過使用 @refetchable 片段由 Relay 自動產生。
• 重新擷取不再區分 refetchVariables 和 renderVariables，這些先前是模糊定義的概念。重新擷取將永遠正確地重新擷取並使用您提供的變數渲染片段（輸入中省略的任何變數都會回退為使用父查詢的原始值）。
• 重新擷取將明確更新元件，這在從 RefetchContainer 呼叫重新擷取時並不總是如此（這將取決於您在重新擷取查詢中查詢的內容，以及片段是否在正確的物件類型上定義）。

---

這個頁面有幫助嗎？

透過以下方式協助我們讓網站變得更好 回答幾個快速問題.