Question/Feature Request: Is There a Way to Use POST Method with useEventSource?

[ehtishama]

Hi there,

First of all, thank you for building this fantastic library!

I wanted to ask if there is a way to use the POST method with useEventSource? I’m working on a project where I need to send a payload to the server as part of the SSE connection, but as far as I know, the native EventSource API only supports GET requests. This is a bit limiting for my use case, as I need to send data through POST.

If the library doesn’t currently support POST requests, I’d like to suggest adding this feature. It would be incredibly useful to have the ability to specify the HTTP method (GET or POST) and include a request body when establishing the SSE connection.

[Lusito]

Hi @ehtishama ,

I wonder what your exact use-case is. People have been using POST for SSE requests for different reasons and depending on the reason you might have different options to do that.

For example:

Use-Case 1: Passing Non-Sensitive Data

If your payload is small enough, you can simply add it to the URL via query parameters. For example /api/sse?topic=news.

Use-Case 2: Getting Progress on a Mutation

You might want to upload a file or do some other form of change with your request and follow the progress of it.

In that case, I would recommend doing the POST first, which responds with an ID and then you can use that ID in the SSE URL like shown above.

The reason is simple: Usually you want to perform the mutation once and based on an event (like a button click). But since useEffect in React might trigger multiple times, the mutation might also be triggered multiple times, which is not what you want. Also, creating a mutation when mounting a component seems like a weird side-effect that nobody would expect.

Use-Case 3: Passing Authentication Data

You might want to pass some form of authentication data which should not be included in the URL for security reasons.
In that case, you might have figured, that you could pass it via headers or via POST (both are not supported by the EventSource class provided by browsers).

You can use cookies to pass this data instead. This even makes your code much simpler, since you don't need to pass that data using some form of context or global state to the component using the event source.

Use-Case 4: Passing a Large Payload

You have data that is too large for it to pass as a query parameter, which does not cause a mutation on the server and sending it as cookie is not a valid solution, as you might have different components with different payloads.

This is probably the only one I can see having a SSE logic using POST in a React component as valid.

So here are my thoughts on how this could be done:

As said above, the browsers EventSource class does not support POST requests and this library heavily relies on the interface of it.

useEventSource

useEventSource supports receiving a custom constructor, so you could in theory pass it a custom constructor, with the same interface as the browsers:

const [eventSource, eventSourceStatus] = useEventSource("api/events", true, EventSourceWithPost);

However, how can we pass the payload to that event-source? For that, I'd either have to adjust the API or you could theoretically abuse the URL parameter like this:

const [eventSource, eventSourceStatus] = useEventSource(`api/events?POST=${JSON.stringify(payload)}`, true, EventSourceWithPost);

(please ignore, that stringify is not the correct way to create a URL here. It's just pseudo-code)

In that case, EventSourceWithPost would have to parse and strip that POST parameter from the URL before continuing. Ugly, but doable right now without a new release and breaking changes in the library.

Another option would be for you to do your own implementation of useEventSource and just use useEventSourceListener from this library. The code for useEventSource isn't that difficult, so you could easily write your own version with support for whatever payload you need.

If this library is going to make this possible, I suppose the new useEventSource usage would look like this:

const [eventSource, eventSourceStatus] = useEventSource('api/events', () => {
    return new EventSourceWithPost(url, { withCredentials: true, payload: { foo: bar } });
});

EventSourceWithPost

Again, EventSource as provided by browsers, does not support this, so you'll need a replacement, which does.
I've done some digging:

• The popular polyfill from Yaffle does not support POST: How to pass 'body' params to EventSourcePolyfill? Yaffle/EventSource#175
• This is not a recommendation (I don't know the author or the library), but sse.js seems to support it.

Hope this helps. Let me know about your use-case and if adjustments to my library are still needed.