Yanonoblog!

こつこつと

GraphQL - ディレクティブとミューテーション

はじめに

GraphQLのドキュメントを読んでまとめていきます。

ところどころ気になった部分を調べて補足したり解釈を入れています。

https://graphql.org/learn/queries/

ディレクティブの使用

ディレクティブは、クエリの実行方法を動的に変更するためのものです。

フィールドの取得を条件付きで制御したり、特定の操作を実行する前後にカスタムのロジックを追加するために使用されます。

サンプルコード

サンプルコードの中でディレクティブが使用されている部分は、@include(if: $withDetails) です。

query GetAnimal($type: AnimalType, $withDetails: Boolean!) {
  animal(type: $type) {
    name
    habitat @include(if: $withDetails) {
      location
    }
  }
}

このディレクティブは、$withDetails の値が true の場合にのみ habitat フィールドをクエリの結果に含めるように指示しています。

もし $withDetails が false であれば、habitat フィールドは結果に含まれません。

ミューテーション

GraphQLでは、データの変更や新しいデータの追加を行うために「ミューテーション」を使用します。

サンプルコード

このミューテーションは、指定されたpostIdの投稿に対して新しいコメントを作成し、そのコメントのtextとauthorを返すことを意図しています。

# mutationキーワードで、データの変更を行うミューテーションを宣言
mutation CreateCommentForPost($postId: ID!, $comment: CommentInput!) {

  # 実際にデータを変更するミューテーションの関数
  createComment(postId: $postId, comment: $comment) {

    # ミューテーションの結果として取得したいデータのフィールドを指定
    # この例では、新しく作成されたコメントの `text` と `author` を取得
    text
    author
  }
}

インラインフラグメント

インターフェースやユニオンタイプを返すフィールドをクエリする場合、具体的なタイプのデータにアクセスするためにインラインフラグメントを使用します。

サンプルコード

# queryキーワードで、データの取得を行うクエリを宣言
query GetVehicle($id: ID!) {

  # 指定されたIDに関連する車両の情報を取得するクエリの関数
  vehicle(id: $id) {

    # 全ての車両タイプで共通のnameフィールドを取得
    name

    # インラインフラグメントを使用して、返される車両が「Car」タイプの場合のみアクセスするフィールドを指定する
    ... on Car {
      # 車のドアの数を取得
      numberOfDoors
    }

    # 同様に、返される車両が「Bike」タイプの場合のみアクセスするフィールドを指定する
    ... on Bike {
      # 自転車のタイプ（例: ロードバイク、マウンテンバイクなど）を取得
      type
    }
  }
}

メタフィールド

GraphQLでは、__typenameなどのメタフィールドを使用してオブジェクトタイプの名前を取得します。

これによって、返されるオブジェクトがどのタイプであるかをクライアントが知ることができます。

サンプルコード

# この場合は "book"に関連する情報を取得
{
  # findは、指定されたアイテムに関連する情報を取得するクエリの関数名
  find(item: "book") {

    # __typenameはメタフィールドで、現在のオブジェクトのタイプ名を取得する
    __typename

    # インラインフラグメントを使用して、返される書籍が「Novel」タイプの場合のみアクセスするフィールドを指定する
    ... on Novel {
      # 小説のタイトルを取得
      title
    }

    # 同様に、返される書籍が「Magazine」タイプの場合のみアクセスするフィールドを指定する
    ... on Magazine {
      # 雑誌の発行日を取得
      issueDate
    }
  }
}

おしまい

コメント

本記事の内容は以上になります！


プログラミングスクールのご紹介 (卒業生より)

お世話になったプログラミングスクールであるRUNTEQです♪

https://runteq.jp/r/ohtFwbjW

こちらのリンクを経由すると１万円引きになります。

RUNTEQを通じて開発学習の末、受託開発企業をご紹介いただき、現在も双方とご縁があります。

もし、興味がありましたらお気軽にコメントか、TwitterのDMでお声掛けください。

https://twitter.com/outputky