GraphQLで「Variable "$X" got invalid value; Expected type "Y"」エラーが表示されたときの解決方法

投稿日 2024年09月02日更新日 2024年09月06日

GraphQL

エラー解決

この記事の目次

生成AIで職務歴書作成を瞬間作成！ RESUMY.AI

GraphQLを使用していて「Variable "$X" got invalid value; Expected type "Y"」というエラーメッセージに遭遇したことはありませんか？このエラーは、GraphQLクエリやミューテーションに渡された変数の型が、スキーマで定義された型と一致しない場合に発生します。本記事では、このエラーの原因と解決方法について詳しく解説します。

エラーの原因

このエラーが発生する主な理由は以下の通りです：

1. 変数の型が正しくない

2. 必須フィールドが欠落している

3. 列挙型の値が無効

4. 入力オブジェクトの構造が不正確

解決方法

1. 変数の型を確認する

まず、クエリやミューテーションで使用している変数の型が、スキーマで定義された型と一致しているか確認しましょう。例えば、整数型（Int）が期待されているところに文字列（String）を渡していないか確認します。

# 正しい例
query ($id: Int!) {
  user(id: $id) {
    name
  }
}

# 間違った例（文字列を渡している）
query ($id: String!) {
  user(id: $id) {
    name
  }
}

2. 必須フィールドを確認する

GraphQLでは、「!」記号で必須フィールドを示します。必須フィールドに値が渡されていない場合、このエラーが発生します。

# 正しい例
mutation ($input: CreateUserInput!) {
  createUser(input: $input) {
    id
    name
  }
}

# 間違った例（必須フィールドが欠落）
mutation ($input: CreateUserInput) {
  createUser(input: $input) {
    id
    name
  }
}

3. 列挙型の値を確認する

列挙型（Enum）を使用している場合、定義された値以外を使用するとエラーが発生します。スキーマで定義された正確な値を使用しているか確認しましょう。

# 正しい例
query ($status: UserStatus!) {
  users(status: $status) {
    name
  }
}

# 間違った例（無効な列挙型の値）
query ($status: String!) {
  users(status: $status) {
    name
  }
}

4. 入力オブジェクトの構造を確認する

複雑な入力オブジェクトを使用する場合、その構造が正確であることを確認します。特に、ネストされたオブジェクトや配列の形式に注意が必要です。

# 正しい例
mutation ($input: CreatePostInput!) {
  createPost(input: $input) {
    id
    title
  }
}

# 変数
{
  "input": {
    "title": "New Post",
    "content": "This is the content",
    "tags": ["GraphQL", "Tutorial"]
  }
}

# 間違った例（構造が不正確）
{
  "input": {
    "title": "New Post",
    "content": "This is the content",
    "tags": "GraphQL, Tutorial"  # 配列ではなく文字列
  }
}