Subscriptions with elysia graphql yoga don't work

[snigdha920]

I needed subscriptions in my project and in the end had to make a different server for graphql yoga because graphql-ws subscriptions wouldn't work with Elysia.

The main issues are:

1. Elysia websocket handlers have a separate type than bun websocket handlers, so this example from the graphql ws library doesn't work out of the box: https://the-guild.dev/graphql/ws/get-started#with-bun
2. The handler from the example for uWebSocket.js satisfies the type, but functionally also doesn't work, I think that's designed for uWebSocket servers, and not bun servers.
3. GraphQL SSE also doesn't quite work, in all the examples for GraphQL SSE with the graphql-sse client, the url that the client connects to is /graphql/stream, a URL that elysia graphql yoga don't expose: https://the-guild.dev/graphql/sse/recipes#client-usage

Because of all these limitations, I had to literally create a separate server and then handle metrics collection, logs collection, etc. for that server again.

I think this is something important, and shouldn't be too hard to add? I'm going to attempt a PR for this @SaltyAom I will try to make the websocket handlers work first, then expose the /graphql/stream url and make it work

Related to: https://github.com/elysiajs/elysia-graphql-yoga/issues/11

[kamalkech]

????

[bogeychan]

graphql-mobius needs an update to support subscriptions types. https://github.com/SaltyAom/mobius/issues/6

you can do this instead as a workaround (don't forget to bun add graphql-yoga):

import { Elysia } from "elysia";
import { yoga } from "@elysiajs/graphql-yoga";
import { createSchema } from "graphql-yoga";

const schema = createSchema({
  typeDefs: `
    type Query {
      hello: String
    }

    type Subscription {
      countdown(from: Int!): Int!
    }
  `,
  resolvers: {
    Query: {
      hello: () => "yay",
    },
    Subscription: {
      countdown: {
        subscribe: async function* (_, { from }) {
          for (let i = from; i >= 0; i--) {
            await Bun.sleep(1000);
            yield { countdown: i };
          }
        },
      },
    },
  },
});

new Elysia()
  .use(
    yoga({
      // @ts-ignore
      schema,
    })
  )
  .listen(5000);

http://localhost:5000/graphql?query=subscription+%7B%0A++countdown%28from%3A+5%29%0A%7D

[kamalkech]

@bogeychan that not working

WebSocket connection to 'ws://localhost:3333/graphql' failed:

[bogeychan]

@kamalkech works for me, use latest versions:

├── @elysiajs/graphql-yoga@1.1.0
├── elysia@1.1.4
├── graphql-yoga@5.6.2

curl -N -H "accept:text/event-stream" http://localhost:5000/graphql?query=subscription%20%7B%0A%20%20countdown%28from%3A%205%29%0A%7D

[bogeychan]

@kamalkech you have to pass WS option if you wanna use WebSockets:

yoga({
  // @ts-ignore
  schema,
  graphiql: {
    // Use WebSockets in GraphiQL
    subscriptionsProtocol: "WS",
  },
})

https://the-guild.dev/graphql/yoga-server/docs/features/subscriptions#graphql-over-websocket-protocol-via-graphql-ws

[bogeychan]

nvm, @elysiajs/graphql-yoga doesn't support WS at the moment, you'll have to use SSE for now

https://github.com/elysiajs/elysia-graphql-yoga/issues/14

[kamalkech]

@bogeychan how use sse with yoga on elysiajs server instead of yoga server

[snigdha920]

nvm, @elysiajs/graphql-yoga doesn't support WS at the moment, you'll have to use SSE for now

14

Even SSE doesn't work, I tried to use it with EventSource, as mentioned in the example here: https://the-guild.dev/graphql/sse/recipes#client-usage

But no events are sent. All the examples use a /graphql/stream endpoint, which could be why. It is a different endpoint that is not configured in the plugin: https://github.com/elysiajs/elysia-graphql-yoga/blob/a4fe2d526152795de397aab65b44b5c293deb1ce/src/index.ts#L195

[kamalkech]

@snigdha920 any piste ?