Softonic

GraphQLクエリビルダー

ステップ 1 / 2
引数
クエリを作成

GraphQL操作を手書きで書くには、波かっこ、引数、インデントを正しく保つ必要があります。このビルダーがドキュメントを組み立ててくれます。クエリ、ミューテーション、サブスクリプションを選び、操作に名前を付け、ルートフィールドを設定し、引数を追加して、必要なフィールドを列挙するだけです。結果は整形された操作になり、Apollo、urql、GraphiQLにそのまま貼り付けられます。

GraphQL操作の作成方法

  1. 1

    操作の種類を選ぶ

    ドロップダウンからクエリ、ミューテーション、サブスクリプションを選択します。これでサーバーが実行する操作の種類が決まります。

  2. 2

    操作に名前を付ける

    GetUserのような名前を付けると、サーバーがログやキャッシュで識別できます。名前は任意で、付けなくても動作します。

  3. 3

    ルートフィールドを設定する

    呼び出したいフィールドを入力します。例：user、createPost、orderUpdated。

  4. 4

    引数を追加する

    id: "123"やid: $idのようなキーと値のペアを追加します。キーが空の行はスキップされます。

  5. 5

    フィールドを列挙してコピーする

    1行に1つのフィールドを入力し、クエリを生成して、整形されたドキュメントをクリップボードにコピーします。

GraphQLドキュメントを扱う

GraphQLドキュメントとは、1つ以上の操作と、それらが参照するフラグメントからなる集合です。各操作はQuery、Mutation、Subscription型のルートフィールドを指定し、サーバーは要求された選択セットを解決します。ビルダーは操作のテキストを作成してくれますが、スキーマは知らないため、実行前にすべてのフィールド名と引数名をAPIと照合してください。

操作の構造

部分 目的 例
操作の種類 クエリ、ミューテーション、サブスクリプション query、mutation、subscription
操作名 キャッシュやログに使用 GetUserById
引数 ルートフィールドに渡す値 user(id: "123")
選択セット フィールドとネストされた選択 { user(id: "123") { name posts { title } } }
変数 操作名と一緒に宣言する型付き入力 query GetUser($id: ID!) { user(id: $id) { name } }

よくある落とし穴

  • 必須の変数は!で終わります。スキーマでNonNullと指定された引数でこれを忘れると、リゾルバーが実行される前に検証エラーになります。
  • 文字列の引数には引用符が必要です。 123のような値は数値です。テキストの値は引数の行で"123"のように二重引用符で囲んで書きます。
  • ユニオン型とインターフェース型では、型固有のフィールドを読み取るために... on TypeNameのインラインフラグメントが必要です。
  • エイリアスは、同じフィールドを異なる引数で2回要求する場合に必須です。例：today: stats(period: DAY)とweek: stats(period: WEEK)。
  • **コネクション（Relay仕様）**はedges { node { ... } }とpageInfo { endCursor hasNextPage }を公開します。どちらかを省略するとページネーションが壊れます。

ヒント

  • Apollo Clientが個別にキャッシュできるように、操作は小さく保ち、名前を付けましょう。
  • 変わる値はリテラルではなく変数で渡すと、サーバーはドキュメントを一度だけ解析して再利用できます。変数は操作名の横で宣言します。例：query GetUser($id: ID!)。
  • 1つのフィールドに複数の引数が必要な場合は、1つの引数行にカンマ区切りでまとめて書きます。例：値にfilter: { status: ACTIVE }。
  • ビルダーは設定したテキストをそのまま出力します。操作が失敗したら、まずフィールド名を現在のスキーマと比較してください。

よくある質問

いいえ。入力したテキストを整形するだけで、呼び出すエンドポイントも必要なスキーマもありません。操作の各部分を入力すれば、ビルダーがドキュメントを組み立てます。

はい。操作のドロップダウンでクエリ、ミューテーション、サブスクリプションを切り替えられます。名前、ルートフィールド、引数、フィールドはすべて同じように使えます。

引数のセクションに行を追加します。キーが引数名で、値が渡す内容です。例：id: “123”またはid: $id。キーが空の行は無視されます。$idのような変数を入力する場合は、操作名の横で自分で宣言してください。例：query GetUser($id: ID!)。

ビルダーは入力したテキストをそのまま出力します。このエラーは通常、フィールド名や引数名がサーバーのスキーマと一致していないことを意味します。ルートフィールドとすべてのフィールド名をAPIと照合し、綴りを修正してください。

関連ツール

ASCII表リファレンス

0から127までの完全なASCII表です。NUL、LF、DELなどの制御コードを含め、各文字の10進数、16進数、8進数、2進数、HTML数値文字参照を表示します。

HTML文字参照

HTMLエンティティの検索可能なリスト、その名称コードおよび数値コード、および特殊文字や記号のワンクリックコピー機能を提供します。

キーボードショートカット一覧

macOS、Windows、Linux向けに、VS Code、Chrome、GNU Readlineを使うBashの公式資料に基づく既定ショートカットを検索できます。

EditorConfig ジェネレーター

インデントのスタイルとサイズ、改行コード、文字コード、空白ルールを指定して .editorconfig ファイルを生成し、IDE やエディタをまたいで書式を統一できます。

メールアドレス検証ツール

メールアドレスを検証します。RFC 5322構文チェック、MXレコードのライブ確認に加え、ローカル部、ドメイン、長さの詳細を表示します。メールは送信されません。

Markdownチートシート

見出し、リスト、表、コード、リンク、画像、GFM構文を、実際のプレビューとコピーできる例で確認できる実用的なMarkdownリファレンスです。

このツールは他の言語でも利用できます