基礎はおさえたのでもっと複雑なクエリを送りたい。

と思ったらデベロッパー環境に GraphQL Framework Demo Application plugin なるお試し用の機能がありました。
入れてみましょう。

Pluginインストール

左のナビゲーションの検索フィールドに [plugin] と入れて検索、結果から [Plugins] をポチ。

開いた画面の上部に検索フィールドがあるので、 [com.glide.graphql.framework.demo] と入れて検索。表示された [GraphQL Framework Demo Application] の右にある [Install] をポチ。

[Activate] をポチ。

スキーマの [User Pto Calendar] がインストールされました。

叩いてみよう (Query)

画面左のナビゲーションから [Pto Demeo Data] でフィルターしてアプリケーションを探してください。
表示されない場合はブラウザのリフレッシュで画面再読み込みしてください。ナビゲーションは画面ぽちぽちしているだけでは再読み込みされません。

引数が一つのオブジェクト

では調べたデータを手がかりにAPIを叩いてみます。
まずはわかりやすいやつ。

    userPtoAnnualBalance(userId: ID!): UserPtoAccount

userPtoAnnualBalanceは引数としてuserIDが必要です。
後ろにある ! マークは必須項目の印です。
データモデルはこちら。

type UserPtoAccount {
    id: ID!
    userName: String!
    balance: Float!
}

登録されているデータはこちら。

適当なユーザーのIDを調べないといけません。
User のカラム欄の任意のユーザーの表示名をクリックし、IDをコピーと言いたいところですがこれは画面に出てこないsys_idなので、以下を参照してください。画面上の3本線 (ハンバーガー) > Copy sys_id
クリップボードにコピーされます。

query {
  sn_pto_demo_data {
    userPtoCalendar {
      userPtoAnnualBalance(userId: "06826bf03710200044e0bfc8bcbe5d8a") {
        id
        userName
        balance
      }
    }
  }
}

レスポンス。

{
  "data": {
    "sn_pto_demo_data": {
      "userPtoCalendar": {
        "userPtoAnnualBalance": {
          "id": "20f4e6d20f230010097e0e52ff767efc",
          "userName": "allyson.gillispie",
          "balance": 152
        }
      }
    }
  }
}

カスタムフォーマットの引数を持つクエリを実行してみる

ではこれ。
関連づけられたオブジェクトは Scheduled で配列ですね。

    userScheduledPto(input: QueryScheduledPtoInput): [Scheduled]

オブジェクト Scheduled はこちら。

interface Scheduled {
    id: String!
    startDate: Date!
    endDate: Date!
}

インプットに [QueryScheduledPtoInput] が必要です。

input QueryScheduledPtoInput {
    id: String!
    startDate: DateInput!
    endDate: DateInput!
}

見慣れないDateInputなるデータ型があります。! がついているので必須です。
データフォーマットはこちら。year, month, dayが必須。

input DateInput {
    year: Int!
    month: Int!
    day: Int!
    hours: Int
    minutes: Int
}

ではクエリ。

query {
  sn_pto_demo_data {
    userPtoCalendar {
      userScheduledPto(
        input: {
        	id: "89d56ed20f230010097e0e52ff767e13"
        	startDate: {
          	year: 2020
          	month: 4
          	day:1
        	}
        	endDate: {
          	year: 2020
          	month: 12
          	day: 31
        	}
      	}, 
      ) {
        id
      }
    }
  }
}

レスポンス。
指定したIDは特に使ってないようなんです。何を入れても同じレスポンスがきます。

{
  "data": {
    "sn_pto_demo_data": {
      "userPtoCalendar": {
        "userScheduledPto": [
          {
            "id": "1db62a160f230010097e0e52ff767e3f"
          },
          {
            "id": "5486e6160f230010097e0e52ff767e96"
          },
          {
            "id": "8b96e6160f230010097e0e52ff767e88"
          }
        ]
      }
    }
  }
}

データ登録してみよう (Mutation)

書き込みしてみましょう。

データ書き込み

Mutationで登録されているフィールドのうち、requestScheduledPtoを使います。有休申請です。

type Mutation {
    requestScheduledPto(input: CreateUserScheduledPtoInput!): UserScheduledPto
    cancelUserScheduledPto(scheduledPtoId: ID!): CancelledScheduledPto
}

インプットとして CreateUserScheduledPtoInputが必要です。
startDate, endDateがDateInputになっているので、先ほども出てきた通りyear, month, dayを指定します。

input CreateUserScheduledPtoInput {
    userId: String!
    startDate: DateInput!
    endDate: DateInput!
    details: String
}

リクエスト。

mutation{
  sn_pto_demo_data{
    userPtoCalendar{
      requestScheduledPto(input:
        {
        userId: "admin"
        startDate: {
            year: 2022
            month: 4
            day: 19
          }
        endDate: {
            year: 2022
            month: 4
            day: 20
          }
        details: "test"
        }
      )
      {
        id
        userName
        isPartialDay
        details
        status
      }
    }
  }
}

レスポンス。

{
  "data": {
    "sn_pto_demo_data": {
      "userPtoCalendar": {
        "requestScheduledPto": {
          "id": "11aeed6a1bfa8110b66f55f0604bcbf1",
          "userName": "admin",
          "isPartialDay": true,
          "details": "test",
          "status": "pending"
        }
      }
    }
  }
}

一番上に登録されています。

データ更新

ではもう一つの cancelUserScheduledPto を使ってみます。
パラメータにはIDが必要です。

    cancelUserScheduledPto(scheduledPtoId: ID!): CancelledScheduledPto

戻り値にはCancelledScheduledPtoを受け取ることができます。

type CancelledScheduledPto {
    scheduledPto: UserScheduledPto!
    userPtoAccount: UserPtoAccount!
}

scheduledPto のオブジェクトは UserScheduledPto

type UserScheduledPto implements Scheduled {
    id: String!
    startDate: Date!
    endDate: Date!
    userName: String!
    isPartialDay: Boolean!
    details: String
    status: String!
}

userPtoAccount のオブジェクトは UserPtoAccount

type UserPtoAccount {
    id: ID!
    userName: String!
    balance: Float!
}

せっかくなので両方から何らかの値を取ってみます。
キャンセルにするPTOのIDは既存レコードから適当にとってきます。

mutation{
  sn_pto_demo_data{
    userPtoCalendar{
      cancelUserScheduledPto(scheduledPtoId: "8ca56ad20f230010097e0e52ff767e0d"){
        scheduledPto{
        	id
          userName
          isPartialDay
          details
          status
      	}
        userPtoAccount{
          userName
        }
      }
    }
  }
}

レスポンス

{
  "data": {
    "sn_pto_demo_data": {
      "userPtoCalendar": {
        "cancelUserScheduledPto": {
          "scheduledPto": {
            "id": "8ca56ad20f230010097e0e52ff767e0d",
            "userName": "allyson.gillispie",
            "isPartialDay": false,
            "details": "Dentist Appt",
            "status": "canceled"
          },
          "userPtoAccount": {
            "userName": "allyson.gillispie"
          }
        }
      }
    }
  }
}

Date型を扱おうとするとSub Selection指定不足のエラーが出るので今日はDateを除きました。また今度調べます。

2022/4/21 追記
Date型についてはてっきりGraphQLの標準か何かかと思ってましたが、スキーマに書いてありました！
Date型って標準にはないんですね。