Apollo-server: The Apollo Server GraphiQL interface specifies endpoint as undefined

[casoetan]

I've hit a roadblock setting up HapiJS with the ApolloStack.

the error when I post to /graphql

{
  "errors": [
    {
      "message": "Cannot read property 'definitions' of undefined"
    }
  ]
}

With graphiql, the chrome console reports

2016-08-14 20:08:09.269 http://localhost:8000/undefined? Failed to load resource: the server responded with a status of 404 (Not Found)
2016-08-14 20:08:09.312 http://localhost:8000/undefined? Failed to load resource: the server responded with a status of 404 (Not Found)

I must have missed something.

my config

'use strict'

const Path = require('path')
const Hapi = require('hapi')

const { ApolloHAPI, GraphiQLHAPI } = require('apollo-server')

const { host, port } = require('./configs')

const { apolloOptions, graphiQLOptions } = require('./options/apollo')

const server = new Hapi.Server({
  connections: {
    routes: {
      files: {
        relativeTo: Path.join(__dirname, 'statics')
      }
    },
    router: {
      stripTrailingSlash: true
    }
  }
})

server.connection({ host, port: process.env.PORT || port })

// Plugins
const plugins = [
  {
    register: new ApolloHAPI(),
    options: apolloOptions,
    routes: { prefix: '/graphql' }
  },
  {
    register: new GraphiQLHAPI(),
    options: graphiQLOptions,
    routes: { prefix: '/graphiql' }
  },

]

server.register([...plugins], err => {
  if (err) throw err

  server.start(err => {
    if (err) throw err
    server.log('info', `Server running at ${server.info.uri}`) // eslint-disable-line
  })
})

the options passed in

const myGraphQLSchema = require('../schemas')

exports.apolloOptions = {
  schema: myGraphQLSchema
}

exports.graphiQLOptions = {
  endpointUrl: '/graphql'
}

My Schema

const {
  GraphQLObjectType,
  GraphQLSchema,
  GraphQLString,
  GraphQLInt,
  GraphQLList,
  GraphQLFloat,
  GraphQLEnumType,
  GraphQLNonNull,
  GraphQLInterfaceType
} = require('graphql')

const TodoType = new GraphQLEnumType({
  name: 'TodoType',
  description: 'A Type of the todo',
  values: {
    HOME: { value: 'home' },
    PLAY: { value: 'play' },
    WORK: { value: 'work' }
  }
})

const Todo = new GraphQLObjectType({
  name: 'Todo',
  description: 'Represent the todos',
  fields: () => ({
    _id: { type: GraphQLString },
    title: { type: GraphQLString },
    importance: { type: GraphQLInt },
    completed: { type: GraphQLInt },
    type: { type: TodoType },
    date: { type: GraphQLFloat },
  })
})

const TodoModel = require('../models/todos')

const Query = new GraphQLObjectType({
  name: 'MySchemaQuery',
  description: "Root of the My Schema",
  fields: () => ({
    todos: {
      type: new GraphQLList(Todo),
      description: "List of todos",
      args: {
        id: { type: GraphQLString },
        active: { type: GraphQLInt },
        importance: { type: GraphQLInt },
        type: { type: GraphQLString },
      },
      resolve: (source, { id, active, importance, type }) => {
        if (id) {
          return TodoModel.getById(id)
        } else if (active) {
          return TodoModel.activeTodos(active)
        } else if (importance) {
          return TodoModel.ofImportance(importance)
        } else if (type) {
          return TodoModel.ofType(type)
        } else {
          return TodoModel.allTodos();
        }
      }
    },

    todo: {
      type: Todo,
      description: "A todo",
      args: {
        id: { type: new GraphQLNonNull(GraphQLString) }
      },
      resolve: (source, { id }) =>
        TodoModel.getById(id)
    },

    latestTodos: {
      type: Todo,
      description: "Latest 5 todos added",
      resolve: () =>
        TodoModel.orderBy('id')
                  .limit(10)
                  .max('_id')
                  .run()
                  .then(todos => todos)
      }
    })
})

const Mutation = new GraphQLObjectType({
  name: "MySchemaMutations",
  fields: {
    createTodo: {
      type: Todo,
      description: "Create a new todo",
      args: {
        title: { type: new GraphQLNonNull(GraphQLString) },
        importance: { type: GraphQLInt },
        type: { type: new GraphQLNonNull(TodoType) }
      },
      resolve: (source, todo) => TodoModel.saveTodo(todo)
    }
  }
})

const Schema = new GraphQLSchema({
  query: Query,
  mutation: Mutation
});

module.exports = Schema

[nnance]

Do you have a link to a complete project in GitHub that I can review?

[casoetan]

NO complete project.

But, I swapped the ApolloHapi with hapi-graphql and also tried @risingstack/graffiti and it worked well.

PS. Sorry for the late response.

[helfer]

I think we should override graphql-js's formatError function and by default use one that prints the stack trace on the server. I think that would help a lot of people debug things. I've opened a separate issue about it (#111)

[helfer]

I'm closing this in favor of #109, which seems to be the same issue.

[casoetan]

Hello @helfer

Just noticed after review, that this error seems to deal with the graphiql endpoint not connecting with my running graphql application.

The application works fine when used with a GraphiQL Desktop application.

See screen below.

[helfer]

are you sure you're passing in the right options? Because passing in bad options is the only way I could imagine getting an undefined in the url.

[casoetan]

Hi @helfer The configuration I'm passing are as described in the docs.

const plugins = [
  {
    register: new ApolloHAPI(),
    options: graphqlOptions,
    routes: { prefix: '/graphql' }
  },
  {
    register: new GraphiQLHAPI(),
    options: { endpointUrl: '/graphql' },
    routes: { prefix: '/graphiql' }
  }
]

[helfer]

I think the issue is that the argument should be called endpointURL, not endpointUrl.

[casoetan]

Yep @helfer that was it.

Maybe we need to update the docs.

Cheers

[helfer]

@casoetan I looked it up in the docs, that's how I found out 😉