CODEWITHSUNDEEP
javascriptgraphqlapollopostgraphile
Jamie Hutber
Jamie Hutber

Reputation: 28064

GraphQL Cannot read property 'query' of undefined

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:

enter image description here

Auto complete works fine:

Before hitting alt+enter

enter image description here

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

enter image description here

Upvotes: 1

Views: 5841

Answers (1)

Daniel Rearden
Daniel Rearden

Reputation: 84657

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.

Upvotes: 1

Related Questions