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オブジェクトで、さらに具体的には、どのオブジェクトインスタンスからデータを читать必要があるかについての情報が含まれています。
  • フラグメント参照の型は生成されたFlow型から<fragment_name>.graphql.jsファイルからインポートできます。これはPropsの型を宣言するために使用できます。フラグメント参照の型の名前は次のようになります: <fragment_name>$key。Relayの型を正しく宣言するためにlint ruleを使用しています。

戻り値

• data: Relayストアから読み取られたデータを含むオブジェクト。オブジェクトは指定されたフラグメントの形状と一致します。
  • dataのFlow型もこの形状と一致し、GraphQLスキーマから派生した型が含まれています。たとえば、上記のdataの型は次のとおりです: { name: ?string, profile_picture: ?{ uri: ?string } }.

動作

• コンポーネントはフラグメントデータの更新に自動的にサブスクライブされます。この特定のUserのデータがアプリ内のどこでも更新された場合(たとえば、新しいデータのフェッチまたは既存のデータの変更など)、コンポーネントは最新の更新されたデータを使用して自動的に再レンダリングされます。
• コンポーネントは、その特定のフラグメントのデータが不足していて、そのデータが現在親クエリによってフェッチされている場合、サスペンドされます。
  • サスペンスの詳細については、サスペンスを使用したローディング状態ガイドを参照してください。

---

このページは役立ちますか?

次の簡単な質問に答えて すぐにサイトを改善できますように.