Subscriptions using built-in SubscriptionServer error: client gets "Cannot read property 'headers' of undefined"

The server sees client connecting successfully, but the client gets the error, even if nothing is published from server.

Meteor’s WebApp is the HTTP server.

  import { ApolloServer } from 'apollo-server-express'
  import { typeDefs } from './schema.js'
  import { resolvers } from './resolvers.js'
  import { DSBooks } from "./DSBooks.js"
  import { getUser } from 'meteor/apollo'

  const server = new ApolloServer({
    typeDefs,
    resolvers,
    dataSources: () => ({
      dsBooks: new DSBooks()
    }),
    context: async ({ req }) => ({ user: await getUser(req.headers.authorization) }),
    uploads: false,
    subscriptions: {
      path: "/subscriptions",
      onConnect: async (connectionParams, webSocket, context) => {
        console.log(`Subscription client connected using Apollo server's built-in SubscriptionServer.`)
      },
      onDisconnect: async (webSocket, context) => {
        console.log(`Subscription client disconnected.`)
      }
     }
  })


  import { WebApp } from 'meteor/webapp'
  server.applyMiddleware({ app: WebApp.connectHandlers }) //path option defaults to /graphql
  WebApp.connectHandlers.use('/graphql', (req, res) => { if (req.method === 'GET') res.end() }) // To prevent server-side exception "Can't set headers after they are sent" because GraphQL Playground (accessible in browser via /graphql) sets headers and WebApp also sets headers

  server.installSubscriptionHandlers(WebApp.httpServer)

If I start a new SubscriptionServer instead, there’s no problem, and the client receives subscription data.

  import { ApolloServer } from 'apollo-server-express'
  import { typeDefs } from './schema.js'
  import { resolvers } from './resolvers.js'
  import { DSBooks } from "./DSBooks.js"
  import { getUser } from 'meteor/apollo'

  const server = new ApolloServer({
    typeDefs,
    resolvers,
    dataSources: () => ({
      dsBooks: new DSBooks()
    }),
    context: async ({ req }) => ({ user: await getUser(req.headers.authorization) }),
    uploads: false,
  })


  import { WebApp } from 'meteor/webapp'
  server.applyMiddleware({ app: WebApp.connectHandlers }) //path option defaults to /graphql
  WebApp.connectHandlers.use('/graphql', (req, res) => { if (req.method === 'GET') res.end() }) // To prevent server-side exception "Can't set headers after they are sent" because GraphQL Playground (accessible in browser via /graphql) sets headers and WebApp also sets headers


  import { SubscriptionServer } from 'subscriptions-transport-ws'
  import { execute, subscribe } from 'graphql'
  import { makeExecutableSchema } from 'graphql-tools'

  SubscriptionServer.create(
    {
      schema: makeExecutableSchema({ typeDefs, resolvers }),
      execute,
      subscribe,
      onConnect: async (connectionParams, webSocket) => {
        console.log(`Subscription client connected using new SubscriptionServer.`)
      },
      onDisconnect: async (webSocket, context) => {
        console.log(`Subscription client disconnected.`)
      }
  },
    {
      server: WebApp.httpServer,
      path: "/subscriptions",
    },
  )

[myhendry]

@almostprogrammer is correct. I structured my ApolloServer code below and it works. for subscription, you don’t use req. u need to use connection details https://github.com/apollographql/graphql-subscriptions/blob/master/.designs/authorization.md

const server = new ApolloServer({
  typeDefs,
  resolvers,
  context: async ({ req, connection }) => {
    if (connection) {
      return {
        ...connection.context,
        pubsub
      };
    } else {
      const token = req.headers["authorization"] || "";
      return {
        User,
        Tweet,
        Comment,
        pubsub,
        userId: await getUser(token)
      };
    }
  }
});

[StefanFeederle]

This is still an issue for most people who setup auth with subscriptions. It’s possible to get it working but really not as easy as it should be. Please see #2315 for proposed api change. Other related issue: #1597

This is a running sandbox showing the problem: https://codesandbox.io/s/apollo-server-qthfh?fontsize=14