Apollo GraphQL tutorial: "GraphQLError: Cannot query field \"id\" on type \"LaunchConnection\"."

Question

I'm trying to follow the Apollo GraphQL tutorial at this step, https://www.apollographql.com/docs/tutorial/resolvers/#run-queries-in-the-playground. Following https://github.com/apollographql/fullstack-tutorial, I ran

cd final/server && npm i && npm start

as well as

cd final/client && npm i && npm start

(For the final/server, I first deleted the package-lock.json before running npm install because I was running into issues with the sqlite3 dependency).

However, in the GraphQL playground on localhost:4000, if I try to run the query

query GetLaunches {
  launches {
    id
    mission {
      name
    }
  }
}

I get the error response

{
  "error": {
    "errors": [
      {
        "message": "Cannot query field \"id\" on type \"LaunchConnection\".",
        "locations": [
          {
            "line": 3,
            "column": 5
          }
        ],
        "extensions": {
          "code": "GRAPHQL_VALIDATION_FAILED",
          "exception": {
            "stacktrace": [
              "GraphQLError: Cannot query field \"id\" on type \"LaunchConnection\".",
              "    at Object.Field (/Users/kurt/Documents/Scratch/fullstack-tutorial/final/server/node_modules/graphql/validation/rules/FieldsOnCorrectType.js:64:31)",
              "    at Object.enter (/Users/kurt/Documents/Scratch/fullstack-tutorial/final/server/node_modules/graphql/language/visitor.js:334:29)",
              "    at Object.enter (/Users/kurt/Documents/Scratch/fullstack-tutorial/final/server/node_modules/graphql/language/visitor.js:385:25)",
              "    at visit (/Users/kurt/Documents/Scratch/fullstack-tutorial/final/server/node_modules/graphql/language/visitor.js:252:26)",
              "    at Object.validate (/Users/kurt/Documents/Scratch/fullstack-tutorial/final/server/node_modules/graphql/validation/validate.js:63:22)",
              "    at validate (/Users/kurt/Documents/Scratch/fullstack-tutorial/final/server/node_modules/apollo-server-core/dist/requestPipeline.js:211:32)",
              "    at Object.<anonymous> (/Users/kurt/Documents/Scratch/fullstack-tutorial/final/server/node_modules/apollo-server-core/dist/requestPipeline.js:124:42)",
              "    at Generator.next (<anonymous>)",
              "    at fulfilled (/Users/kurt/Documents/Scratch/fullstack-tutorial/final/server/node_modules/apollo-server-core/dist/requestPipeline.js:4:58)",
              "    at processTicksAndRejections (internal/process/task_queues.js:93:5)"
            ]
          }
        }
      },
      {
        "message": "Cannot query field \"mission\" on type \"LaunchConnection\".",
        "locations": [
          {
            "line": 4,
            "column": 5
          }
        ],
        "extensions": {
          "code": "GRAPHQL_VALIDATION_FAILED",
          "exception": {
            "stacktrace": [
              "GraphQLError: Cannot query field \"mission\" on type \"LaunchConnection\".",
              "    at Object.Field (/Users/kurt/Documents/Scratch/fullstack-tutorial/final/server/node_modules/graphql/validation/rules/FieldsOnCorrectType.js:64:31)",
              "    at Object.enter (/Users/kurt/Documents/Scratch/fullstack-tutorial/final/server/node_modules/graphql/language/visitor.js:334:29)",
              "    at Object.enter (/Users/kurt/Documents/Scratch/fullstack-tutorial/final/server/node_modules/graphql/language/visitor.js:385:25)",
              "    at visit (/Users/kurt/Documents/Scratch/fullstack-tutorial/final/server/node_modules/graphql/language/visitor.js:252:26)",
              "    at Object.validate (/Users/kurt/Documents/Scratch/fullstack-tutorial/final/server/node_modules/graphql/validation/validate.js:63:22)",
              "    at validate (/Users/kurt/Documents/Scratch/fullstack-tutorial/final/server/node_modules/apollo-server-core/dist/requestPipeline.js:211:32)",
              "    at Object.<anonymous> (/Users/kurt/Documents/Scratch/fullstack-tutorial/final/server/node_modules/apollo-server-core/dist/requestPipeline.js:124:42)",
              "    at Generator.next (<anonymous>)",
              "    at fulfilled (/Users/kurt/Documents/Scratch/fullstack-tutorial/final/server/node_modules/apollo-server-core/dist/requestPipeline.js:4:58)",
              "    at processTicksAndRejections (internal/process/task_queues.js:93:5)"
            ]
          }
        }
      }
    ]
  }
}

(See screenshot below).

Any idea what is causing this? I do see a GraphQL schema in the right pop-up window which appears to contain these fields:

directive @cacheControl(
  maxAge: Int
  scope: CacheControlScope
) on FIELD_DEFINITION | OBJECT | INTERFACE
enum CacheControlScope {
  PUBLIC
  PRIVATE
}

type Launch {
  id: ID!
  site: String
  mission: Mission
  rocket: Rocket
  isBooked: Boolean!
}

type LaunchConnection {
  cursor: String!
  hasMore: Boolean!
  launches: [Launch]!
}

type Mission {
  name: String
  missionPatch(size: PatchSize): String
}

type Mutation {
  bookTrips(launchIds: [ID]!): TripUpdateResponse!
  cancelTrip(launchId: ID!): TripUpdateResponse!
  login(email: String): String
}

enum PatchSize {
  SMALL
  LARGE
}

type Query {
  launches(
    pageSize: Int
    after: String
  ): LaunchConnection!
  launch(id: ID!): Launch
  me: User
}

type Rocket {
  id: ID!
  name: String
  type: String
}

type TripUpdateResponse {
  success: Boolean!
  message: String
  launches: [Launch]
}

scalar Upload

type User {
  id: ID!
  email: String!
  trips: [Launch]!
}

DanStarns DanStarns · Accepted Answer · 2019-11-22T17:30:00

Looking at the schema you provided, Query launches returns type LaunchConnection

type LaunchConnection {
  cursor: String!
  hasMore: Boolean!
  launches: [Launch]!
}

type Query {
  launches: LaunchConnection!
}

Your query, below, is expected to return type LaunchConnection

query GetLaunches {
  launches {
    id
    mission {
      name
    }
  }
}

But LaunchConnection has fields cursor, hasMore & launches. You are asking for fields id & mission on the incorrect type. You should first dive into the launches field on LaunchConnection then you can ask for fields on the Launch type. Your query should look like the following:

query GetLaunches {
    launches {
        launches {
            id
            mission {
                name
            }
        }
    }
}

Apollo GraphQL tutorial: "GraphQLError: Cannot query field \"id\" on type \"LaunchConnection\"."

1 Answers