Cannot query field on type の原因と解決策

概要

GraphQLで、スキーマに定義されていないフィールドをクエリしようとした場合に発生するバリデーションエラーです。

エラーメッセージ

1
2
3
4
5
6
7
8
{
  "errors": [
    {
      "message": "Cannot query field \"email\" on type \"User\".",
      "locations": [{ "line": 3, "column": 5 }]
    }
  ]
}

原因

フィールド名のタイプミス: スペルが間違っている
スキーマに未定義: そのフィールドが定義されていない
型の間違い: 異なる型のフィールドを参照
スキーマの更新漏れ: バックエンドとフロントエンドの不整合

解決策

1. スキーマを確認

1
2
3
4
5
6
# スキーマ定義
type User {
  id: ID!
  name: String!
  email: String!  # このフィールドが存在するか確認
}

2. クエリを修正

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
# 悪い例
query {
  user(id: "1") {
    mail  # タイプミス
  }
}

# 良い例
query {
  user(id: "1") {
    email  # 正しいフィールド名
  }
}

3. フラグメントを使用

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
fragment UserFields on User {
  id
  name
  email
}

query {
  user(id: "1") {
    ...UserFields
  }
}

4. __typenameで型を確認

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
query {
  user(id: "1") {
    __typename
    ... on User {
      email
    }
    ... on Admin {
      adminEmail
    }
  }
}

5. Introspectionでスキーマを取得

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
query {
  __type(name: "User") {
    fields {
      name
      type {
        name
      }
    }
  }
}

6. コード生成を使用

1
2
3
# GraphQL Code Generator
npm install -D @graphql-codegen/cli
npx graphql-codegen init

1
2
3
4
5
// 生成された型を使用
import { useGetUserQuery } from './generated/graphql';

const { data } = useGetUserQuery({ variables: { id: "1" } });
console.log(data?.user?.email);  // 型安全

7. スキーマを同期

1
2
# スキーマをダウンロード
npx apollo client:download-schema schema.graphql

概要

エラーメッセージ

原因

解決策

1. スキーマを確認

2. クエリを修正

3. フラグメントを使用

4. __typenameで型を確認

5. Introspectionでスキーマを取得

6. コード生成を使用

7. スキーマを同期

GraphQL の他のエラー