GraphQL Cannot read property 'query' of undefined

Question

I cannot work out why I would get a query undefined when I know my definitions are correct. graphiQL is picking up my schemes without problems:

Auto complete works fine:

After hitting ctrl+enter all the fields are entered, see above.

Then I execute the query and I'll get:

{
  "errors": [
    {
      "message": "Cannot read property 'query' of undefined",
      "locations": [
        {
          "line": 1,
          "column": 3
        }
      ],
      "path": [
        "allAwards"
      ]
    }
  ],
  "data": {
    "allAwards": null
  }
}

npm run graphql

"graphql": "nodemon -r dotenv/config --experimental-modules --inspect=[9222] graphql_server.js",

graphql_server.js

import express from 'express'
import pg from 'pg'
import graphqlHTTP from 'express-graphql'
import PAS from 'postgraphile-apollo-server'
import AP from 'apollo-server-express'

const { makeSchemaAndPlugin } = PAS
const { ApolloServer } = AP

const env = process.env.NODE_ENV || 'development'
const dbHost = process.env.DB_HOST
const dbPort = process.env.DB_PORT
const dbName = process.env.DB_NAME
const dbUser = process.env.DB_USER
const dbPwd = process.env.DB_PWD
const dbUrl = dbPwd
  ? `postgres://${dbUser}:${dbPwd}@${dbHost}:${dbPort}/${dbName}`
  : `postgres://${dbHost}:${dbPort}/${dbName}`

const pgPool = new pg.Pool({
  connectionString: dbUrl,
})

async function main() {
  const { schema, plugin } = await makeSchemaAndPlugin(
    pgPool,
    'public', // PostgreSQL schema to use
    {
      // PostGraphile options, see:
      // https://www.graphile.org/postgraphile/usage-library/
    }
  )

  const server = new ApolloServer({
    schema,
    plugins: [plugin],
  })
  const app = express()

  app.use(
    '/graphql',
    graphqlHTTP({
      schema: schema,
      graphiql: true,
    })
  )

  server.applyMiddleware({ app })

  app.listen({ port: 4000 }, () => console.log(` Server ready at http://localhost:4000${server.graphqlPath}`))
}

main().catch(e => {
  console.error(e)
  process.exit(1)
})

There are 2 rows currently in psql db for awards as well

Why are you using `express-graphql` on top of Apollo? if you need GraphiQL, Apollo already exposes a GraphQL Playground interface which does everything that GraphiQL does plus more. It's possible that by applying *both* middleware, you're creating some unexpected conflict. Try removing `express-graphql` first. — Daniel Rearden, Jun 23 '19 at 20:57
Ye, this was the reason why. I dislike playground as it doesn't have autocomplete. i wish it did :( I did actually remove this and indeed it fixed it, but now I'm at a bit of a roadblock — Jamie Hutber, Jun 23 '19 at 20:59
GraphQL Playground does have autocomplete? Works just fine [here](https://codesandbox.io/s/apollo-server). — Daniel Rearden, Jun 23 '19 at 21:02
I've seen autocomplete break before, usually because something is off with the schema and the introspection query returns something unexpected. You can check the console in the browser and see if there's an error shown in those cases. — Daniel Rearden, Jun 23 '19 at 21:07
Thanks Daniel, its actually autocomplete on the fields, so the `edge > node > *` fields that I was after auto completing, all of them. But yes, I think your answer is onto the real problem here. — Jamie Hutber, Jun 23 '19 at 22:11

Daniel Rearden · Accepted Answer · 2019-06-23T23:46:02.923

1

You should not utilize middleware from both express-graphql and apollo-server in your express application. Because postgraphile-apollo-server works explicitly with ApolloServer, drop express-graphql altogether. Having both middleware is likely to cause unexpected issues since they listen on the same paths.

Apollo has abandoned GraphiQL in favor of GraphQL Playground. If you want to use GraphiQL with Apollo, you can use a package like express-graphiql-middleware.

edited Jun 23 '19 at 23:46

answered Jun 23 '19 at 21:05

Daniel Rearden

80,636
11
185
183

I wonder if there is a way to use graphqil over the playground? – Jamie Hutber Jun 23 '19 at 22:12
@JamieHutber [Not with just Apollo](https://github.com/apollographql/apollo-server/commit/e4a6e873f80fc1fcc2cf06808a122b1550cbde42). You can always try something like [this package](https://www.npmjs.com/package/express-graphiql-middleware) which should just serve GraphiQL on the designated path without touching anything else. – Daniel Rearden Jun 23 '19 at 23:04
Nailed it, add that to the answer and I will accept in a heart beat :D thank you sir. – Jamie Hutber Jun 23 '19 at 23:30
Now its this one I need to fix lol https://stackoverflow.com/questions/56728281/react-nextjs-wont-compile-when-using-react-apollo – Jamie Hutber Jun 23 '19 at 23:30

GraphQL Cannot read property 'query' of undefined

npm run graphql

graphql_server.js

1 Answers1