Hot Module Replacement stopped working when using yoga websocket with NextJS

[clayrisser]

Describe the bug

  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?

Your Example Website or App

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

Steps to Reproduce the Bug or Issue

Run yoga on nextjs with websockets

Expected behavior

I expect HMR to still work but it break with the following error.

GET
ws://localhost:3000/_next/webpack-hmr

Firefox can’t establish a connection to the server at ws://localhost:3000/_next/webpack-hmr.

Screenshots or Videos

No response

Platform

• OS: [e.g. macOS, Windows, Linux]
• NodeJS: [e.g. 18.1.0]
• @graphql-yoga/* version(s): [e.g. 2.5.1]

Additional context

No response

[EmrysMyrddin]

Did you tried this example ? It sets up a custom server, giving you the full control of it: https://the-guild.dev/graphql/yoga-server/docs/integrations/integration-with-nextjs#websockets-for-subscriptions

[clayrisser]

Yeah, but the hot reloading doesn't work with that example.

[musjj]

It looks like that you've moved away from Next.js, but can you re-open this issue anyways for other users? You can unsubscribe from this issue if you don't want to get notified.

[clayrisser]

I ended up running my backend separately and putting an nginx reverse proxy in front of nextjs and the backend.