useFragment

useFragment

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

const React = require('React');

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

type Props = {
  user: UserComponent_user$key,
};

function UserComponent(props: Props) {
  const data = useFragment(
    graphql`
      fragment UserComponent_user on User {
        name
        profile_picture(scale: 2) {
          uri
        }
      }
    `,
    props.user,
  );

  return (
    <>
      <h1>{data.name}</h1>
      <div>
        <img src={data.profile_picture?.uri} />
      </div>
    </>
  );
}

引數

• fragment：使用 graphql 樣板字面值指定的 GraphQL 片段。
• fragmentReference：片段參考是一個不透明的 Relay 物件，Relay 用它從 store 中讀取片段的資料；更具體地說，它包含有關應該從哪個特定物件實例讀取資料的資訊。
  • 片段參考的類型可以從產生的 Flow 類型導入，從檔案 <fragment_name>.graphql.js 中導入，並且可以用來宣告您的 Props 的類型。片段參考類型的名稱將為：<fragment_name>$key。我們使用我們的 lint 規則 來強制片段參考 prop 的類型被正確宣告。

回傳值

• data：包含從 Relay store 中讀取的資料的物件；此物件符合指定的片段形狀。
  • data 的 Flow 類型也將符合此形狀，並包含從 GraphQL Schema 衍生的類型。例如，上述 data 的類型為：{ name: ?string, profile_picture: ?{ uri: ?string } }。

行為

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

---

此頁面有幫助嗎？

請協助我們透過 回答幾個快速問題，讓網站變得更好.