graphql/yoga-server/docs/integrations/integration-with-nextjs

[giscus[bot]]

graphql/yoga-server/docs/integrations/integration-with-nextjs

GraphQL Yoga Documentation

https://the-guild.dev/graphql/yoga-server/docs/integrations/integration-with-nextjs

[soosap]

Thank you very much for the example using the custom server for websockets. It's working for me until it comes to session authentication with next-auth. I am not quite sure how to get a hold of the session inside context.

When I try to turn that on inside the context function...

req.session = await getServerSession(req, res, authOptions)

... I get the following error

ERR TypeError: Cannot read properties of undefined (reading 'cookies')
    at getServerSession (/Users/soosap/proj/node_modules/next-auth/next/index.js:169:20)

Any pointers are much appreciated!:)

[enisdenjo]

Hey there, thank you for reporting! I've made an update to the NextJS documentation providing the right context value. Essentially, in the useServer from graphql-ws:

- yoga.getEnveloped(ctx)
+ yoga.getEnveloped({
+   ...ctx,
+   req: ctx.extra.request,
+   socket: ctx.extra.socket,
+   params: msg.payload,
+ })

However, you'll stumble upon another problem with next-auth: TypeError: Cannot read properties of undefined (reading 'getHeader') at setCookie. The issue here, as far as I understand it, is that next-auth assumes that all requests are good ol' HTTP requests where it gets a request and sends a response - WebSockets dont work like that... With WebSockets you get an upgrade request that the ws library handles and responds accordingly. All further communication happens within the established TCP connection; what I am trying to say is, there is no response that can be passed to next-auth. 😕

[soosap]

Hi thanks for looking into this. so according to my research, it seems several people have this problem with getting a hold of the session using getServerSession. Accordingly one person claims that this is due to next-auth and it's inability to bump up the nextjs version. Supposedly, in next-auth v5 this should be resolved and the getServerSession should no longer throw this error below.

// ERR Error: Invariant: Method expects to have requestAsyncStorage, none available
// vercel/next.js#45371
// vercel/next.js#46356
// vercel/next.js#46356
// nextauthjs/next-auth#7523
// nextauthjs/next-auth#6989

[soosap]

I have a second topic that I want to discuss for the graphql-yoga custom server solution. My Hot Module Replacement stopped working. In the solution that I had in place previously I would do this:

  res.socket.server.ws ||= (() => {
    res.socket.server.on(
      'upgrade',
      function (request: IncomingMessage, socket: Socket, head) {
        const { pathname } = parse(request.url ?? '')

        if (pathname === '/api/graphql') {
          wsServer.handleUpgrade(request, socket, head, function (ws) {
            wsServer.emit('connection', ws)
          })
        } else if (pathname === '/_next/webpack-hmr') {
          // Do nothing
        } else {
          socket.destroy()
        }
      }
    )

    serverCleanup = useServer<ConnectionParams>({ schema, context }, wsServer)
    return wsServer
  })()

What would be the equivalent in this example to bring back HMR?

[clayrisser]

I am facing the same issue.

[EmrysMyrddin]

Can you share the setup of your server so we can take a look ?

[clayrisser]

I moved away from trying to use this with nextjs.