GraphQLのフラグメントをライブで組み立てる
ホーム GraphQLのフラグメント
GraphQLのフラグメント：名前付き、インライン、型条件 | We.Inc
ライブのクエリビルダーでGraphQLのフラグメントを組み立てます。再利用のための名前付きフラグメント、ユニオンとインターフェースのためのインラインフラグメント、型条件、__typename、変数を解説します。
GraphQLのフラグメントは、1つの型に対する名前付きの再利用可能なフィールドの集合で、fragment Name on Typeと書き、...Nameでクエリに取り込みます。インラインフラグメントは... on Typeと書き、名前を持たず、結果がその具体的な型のときだけフィールドを選択します。ユニオンやインターフェースをクエリする方法がこれです。
フラグメントの形式
名前付きフラグメント fragment UserCard on User { ... } 複数のクエリで1つのフィールド一覧を共有する スプレッド ...UserCard 名前付きフラグメントのフィールドを取り込む インラインフラグメント ... on Photo { url } ユニオンやインターフェースの1つのメンバーのフィールド 型なしのインライン ... @include(if: $full) { bio } フィールドのまとまりにディレクティブを適用する 型名 __typename レスポンス内でユニオンのメンバーを見分ける ビルダーで必要なフィールドにチェックを入れると、クエリが書き出されます。名前付きフラグメントを使った版と、フィールドをインラインで書いた版の両方が出るので、同じデータを要求していることを確認できます。検索結果のオプションをオンにすると、ユニオンに対するインラインフラグメントが追加されます。
画面上のカードに表示するUserのフィールドにチェックを入れます。 フィールドを名前付きフラグメントに入れるか、クエリに直接書くかを選びます。 検索結果をオンにすると、メンバーの型ごとにインラインフラグメントを持つユニオンのフィールドが追加されます。 クエリをコピーし、これらの型を持つスキーマに対して実行します。 フラグメントには、UserCardやPostRowのように、それを使うコンポーネントの名前を付けましょう。画面の各部分が自分に必要なデータを明示できます。 ユニオンやインターフェースから選択するときは、必ず__typenameを追加しましょう。どのメンバーを受け取ったかを知るために、コードがそれを必要とします。 フラグメントはオペレーションの変数を読めるため、フラグメント内のフィールドでsize: $avatarSizeのような引数を取れます。 フラグメントは、直接にも他のフラグメント経由でも、自分自身をスプレッドできません。この循環は、何かが実行される前にバリデーションで拒否されます。 よくある質問
フラグメントでレスポンスは小さくなりますか？
いいえ。フラグメントはクエリを書くための補助です。サーバーが展開するので、レスポンスはフィールドを手で書いた場合とまったく同じになります。2つのスプレッドが同じフィールドを選択しても、出てくるのは1回だけです。
インラインフラグメントを使わなければならないのはどんなときですか？
フィールドがユニオンかインターフェースを返し、一部のメンバー型だけが持つフィールドが必要なときです。graphql.orgでは、primaryFunctionを持つDroidか、heightを持つHumanのどちらかであるheroを例に示しています。
フラグメントを別の型で使えますか？
適用できる場所でだけ使えます。インターフェースに対するフラグメントは、それを実装するどのオブジェクト型の中でもスプレッドできますが、User用のフラグメントをPostの選択の中でスプレッドするとバリデーションで失敗します。
フラグメントはドキュメントのどこに置きますか？
ドキュメントのトップレベルで、オペレーションと並べて置きます。順序は自由です。定義したフラグメントはすべて使われている必要があり、そうでないとサーバーはドキュメントを不正として拒否します。
再利用のための名前付きフラグメント
プロフィールのヘッダー、コメント、メンバー一覧のすべてで名前とアバターを表示するとします。これらのフィールドを3回書くと、ずれが生じやすくなります。1つのコピーにだけ、他にないフィールドが増えるといった具合です。User用のフラグメントなら一覧を1か所で持ち、各クエリがそれをスプレッドします。 コンポーネントベースのアプリでは、さらに一歩進めます。各コンポーネントが必要なフラグメントを宣言し、ページのクエリが描画するコンポーネントのフラグメントをスプレッドするので、データの要件がそれを使うコードのすぐそばに置かれます。 インラインフラグメントと型条件
on Typeの部分が型条件です。名前付きフラグメントでは、フィールドがどの型に属するかを示します。ユニオンのフィールド内のインラインフラグメントでは、オブジェクトがその型のときだけフィールドを適用させます。 ユーザー、投稿、写真を返す検索が典型例です。選択の中に... on User、... on Post、... on Photoをそれぞれ独自のフィールドとともに並べ、__typenameで各結果がどの分岐に入ったかをクライアントに伝えます。 ビルダーが使うスキーマ
検索結果用のユニオン
SearchResultはUserかPhotoのどちらかなので、そのどちらのメンバーのフィールドに届くにも、選択にインラインフラグメントが必要です。
ユニオンのレスポンスを読む
検索が返すもの
各項目には、自分の分岐のフィールドと__typenameだけが含まれます。
__typenameで分岐する
メンバーを見分ける安全な方法は型名です。フィールドの有無で判定すると、後でその型にフィールドが追加されたときに壊れることがあります。
フラグメントのクエリビルダー
選択するUserのフィールド
名前付きフラグメントを使う（UserCard）
検索結果を追加する（インラインフラグメント付きのユニオン）
クエリ
クエリをコピー
{n}個のフィールドを選択、クエリは{v}行
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る