No response from subscription in React code.

[hansehe]

I've tried to implement graphql-sse in a react application with vite as you can see here:

• https://github.com/hansehe/graphql-gateway/blob/wundergraph/client/sse-client/src/App.tsx

The react application is a test to verify a successfull graphql SSE subscription, which I have confirmed works from the backend with a graphiql playground.

The graphql subscription successfully connects as a SSE connection, which I can see in the terminal, and it receives the expected events in the terminal. But, none of the events show up in the code, where I expect the 'next' function to receive each event and log it to the console. The code only confirms a successfull connection.

To describe the steps:

1. The SSE subscription works well in the graphiql playground:
   
   

2. The same SSE subcription should work with graphql-sse in react, and it successfully connects and receives events on the connection seen in the terminal:

3. But none of the events (as they have been received on the connection as seen in the terminal), are handled by the code.

The problem is replicable using this branch:

• https://github.com/hansehe/graphql-gateway/blob/wundergraph

Steps to boot up everything (need python, node and docker):

pip install DockerBuildManagement
# Run bakground services which are stitched togheter by the wundegraph graphql gateway - Note: the services are compiled for amd64
dbm -swarm -start
# Build and run the graphql gateway (wundergraph)
dbm -build -run service
# The graphql gateway is hosted on http://localhost:8181/graphql

# Run React client
cd ./client/sse-client
npm ci
npm run dev
# hosted on http://localhost:3001

Graphql subscription (test out in playground and starts in the react app automatically):

subscription {
  mqttSubscription {
    payload
  }
}

Graphql mutation to send an event (run in the playground at http://localhost:8181/graphql):

mutation {
  mutateMqtt {
    topics
  }
}

I really appreciate any help here!

Best regards.
Hans Erik

[enisdenjo]

Hey there, there must be an issue with the app. By glancing over it, I see that you're calling createClient on each render, which is wasteful and could be a reason.

[enisdenjo]

But shouldn't you use the same URL? Why are you using different URLs on the app compared to graphiql?

[hansehe]

The react app is hosted on 3001, and opens a general proxy to the backend hosted on 8181 to avoid cross origin issues on the client, and the proxy works well since all the callls are done with post.

The backend hosted on 8181 has an inbuilt graphiql playground that.

So the proxy, managed by Vite/node, isn't the problem here.

[hansehe]

Hi again, I've found examples on working code for the server, but nothing for the client. I'm trying to verify a working client with this library, given the examples, but it doesn't work so far. If you don't find it troublesome, is it possible for you to create a simple fully-working app in React or similar that subscribes and works with graphql-sse?

For now, this looks like a good library, but for now it does not work on the client.

[enisdenjo]

graphql-sse is thoroughly tested and is used in production in many apps. If it were broken, you wouldn't be the first one reporting the issue. 😅

Given that I am very busy, and aside from having built the library, having created a lot of recipes that help people kickstart their project should be enough from my side.

However, I am willing to take a look if you can create a minimal repro - something I can run having only Node installed with code focusing mainly on graphql and graphql-sse.

[enisdenjo]

Also, it could be the proxy. Since, following your claims, it's the only difference between the app and graphiql. You can easily confirm that by pointing the app directly to the gql server instead of the proxy. Simply enable CORS on the server, or use one of many Chrome extensions to disable CORS checking in the browser.

If it turns out to be the proxy, you should take a look into http-proxy (which is the proxy utility used by Vite, AFAIK).

[AlexanderMoroz]

Hi! I've also experience same problem - nothing in output with basic examples of wundergraph-sse server and graphql-sse client in browser application

I'm using wundergraph-sse example to have simple sse subscription with graphql:
https://github.com/wundergraph/wundergraph/tree/main/examples/graphql-sse-subscriptions

client code is small and simple:

import { Client, createClient, RequestParams } from "graphql-sse";

const client = createClient({
  url: 'http://localhost:9991/graphql',
  on: {
    connecting: () => console.log('client connecting'),
    connected: () => console.log('client connected'),
    message: (message) => console.log('client message', message),
  }
});

 const subscription = client.subscribe({
      query: `subscription {
          sse_greetings
       }`
    }, {
      next: (data) => {
        console.log('data', data);
      },
      error: (error) => {
        console.error('error', error);
      },
      complete: () => {
        console.log('complete');
      }
    });

I've tried several different examples you provided - with async iterator and subscription but non of them looks like have any effect.
But I can see payload in network tab that comes to my client, just have nothing as output from graphql-sse client

So maybe there is some compatibility issue with wundergraph's implementation of sse or something else

That's is the only output I have from the code above

Would be great if you can give any hint what can be wrong

Thanks in advance!

[hansehe]

Given @AlexanderMoroz also tried graphql-sse with Wundergraph (exposing SSE), are you still sure this is not a bug in graphql-sse @enisdenjo?

[enisdenjo]

@hansehe @AlexanderMoroz, inspecting the messages received over SSE in your screenshots - I noticed that they're malformed coming from the server - they dont have an "event" type specified. There is nothing graphql-sse can do here.

The SSE messages for subscription events must specify event: next to be registered by graphql-sse as per the GraphQL over SSE protocol.

I reckon graphiql works because it's not using graphql-sse - but is using the plain ol' EventSource and just the on-message handler.

You guys should open an issue on the server's repo.

[AlexanderMoroz]

Thanks! That's very useful, I'll try to figure it out why it's like this