Supporting a stream-based flow (EventSource, SSE)

[thomasbertet]

Hi!

Just curious if you would be interested in supporting a new use case for streamed data.
For instance, it could support EventSource.

From what I can foresee, this would "look-like" the infinite query flow - with the difference being that it's not the front-end pulling new data but the server sending it intermittently.

Also, just wanted to say I find the doc really nice 👍 . Great job!

[tannerlinsley]

Let me start with this... if you can write a custom hook that uses the useInfiniteQuery hook and does this with an event source, then we can have a better discussion on whether something like this should belong in React Query, or simply as a new npm module like react-query-use-event-source

[thomasbertet]

have a better discussion on whether something like this should belong in React Query, or simply as a new npm module

This is actually my question - sorry for not being clear.

if you can write a custom hook that uses the useInfiniteQuery hook and does this with an event source

I'll try to experiment with that and post here the result. As I understand your answer, it might help guide the answer to my question =)

[tannerlinsley]

Moving this to discussions as this is a feature request.

[thomasbertet]

Thanks, not used to have this discussion thing - sorry =)

[thomasbertet]

So I tried this that works OK, but I feel there is a better way:

The API would be something like:

const { status, data }  = useEventSourceQuery(myQueryKey, myEventSourceURL, myEventName);

as for the implementation I thought of something like:

import * as React from 'react';
import { useInfiniteQuery} from 'react-query';

interface CustomQueryParams {
    eventData: string[];
}

type Status = "success" | "loading" | "error";

export const useEventSourceQuery = (key: string, url: string, eventName: string) => {

    const eventSource = React.useRef<EventSource>(new EventSource(url));

    const queryFn = React.useCallback((_: any, params: CustomQueryParams) => {
        if (!params) { return Promise.resolve([])}
        return Promise.resolve(params.eventData);
    }, [])
    
    const  { data, fetchMore } = useInfiniteQuery<string[], string, CustomQueryParams>(key, queryFn as any, { getFetchMore: () => ({ eventData: []})})

    const customStatus = React.useRef<Status>('success'); 

    React.useEffect(() => {
        const evtSource = eventSource.current;

        const onEvent = function (ev: MessageEvent | Event) {
            if (!e.data) {
                return;
            }
            // Let's assume here we receive multiple data, ie. e.data is an array.
            fetchMore({ eventData: e.data });
        }
        const onError = () => { customStatus.current = 'error' };

        evtSource.addEventListener(eventName, onEvent);
        evtSource.addEventListener('error', onError);

        return () => {
            evtSource.removeEventListener(eventName,onEvent);
            evtSource.removeEventListener('error', onError);
        }

    }, [url, eventName, fetchMore])

    return {status: customStatus.current, data };
}

Some critical thoughts regarding this: I'm still unsure if this is the way to go. Does the URL and event name should live in this hook, like is it something this hook should handle OR should we pass some kind of async generator function so that the hook does not even know about EventSource - ie. it could work for anything async other than simple promise.

WDYT ?

[tannerlinsley]

Hmmm. Reworking the lib to handle generators too would be a massive breaking change and probably cause a lot of bloat for such a slim use case. The question I'm wondering about is if you think it would be possible to first, make custom hook that uses generators and wraps useInfiniteQuery. If that is possible, then you could make another custom hook off of that that could handle an event source.

Whether or not these hooks would make it into the core of the library... I'm not sure. But that doesn't mean we can't build them.

[thomasbertet]

Soo based on your latest suggestion, I made two rough things:

One using async generator to pull data:

export const useAyncGeneratorQuery = (key: string, asyncGeneratorFn: () => Generator<string[], string[], unknown>) => {

    const queryFn = React.useCallback((_: any, params: CustomQueryParams) => {
        if (!params) { return Promise.resolve([])}
        return Promise.resolve(params.eventData);
    }, [])
    
    const  { data, fetchMore } = useInfiniteQuery<string[], string, CustomQueryParams>(key, queryFn as any, { getFetchMore: () => ({ eventData: []})})

    const customStatus = React.useRef<Status>('success'); 

    React.useEffect(() => {
        (async function doReceive() {
            try { 
                for await (let data of asyncGeneratorFn()) {
                    fetchMore({ eventData: data });
                }
            } catch (e) {
                customStatus.current = 'error';
            }
        })();

    }, [asyncGeneratorFn, fetchMore])

    return {status: customStatus.current, data };
}

and one using simple callback paradigm:

type CallbackType = (data: string[]) => void;

type InitCallbackType = (cb: CallbackType) => void;

export const useCallbackQuery = (key: string, initCallbackQuery: InitCallbackType) => {

    const queryFn = React.useCallback((_: any, params: CustomQueryParams) => {
        if (!params) { return Promise.resolve([])}
        return Promise.resolve(params.eventData);
    }, [])
    
    const  { data, fetchMore } = useInfiniteQuery<string[], string, CustomQueryParams>(key, queryFn as any, { getFetchMore: () => ({ eventData: []})})

    const callback = React.useCallback((data) => { fetchMore({ eventData: data })}, [fetchMore]);

    React.useEffect(() => {  initCallbackQuery(callback); }, [callback, initCallbackQuery] )
    
    const customStatus = React.useRef<Status>('success'); 

    return {status: customStatus.current, data };
}

I said rough because both are not handling errors and/or maybe edge-cases. They also have an initial empty array.

You can check the live code there https://codesandbox.io/s/interesting-bhaskara-zw2dd?file=/src/App.tsx . Can you think of anything that would break things / edge cases I should handle ?

Also, when clicking on the sandbox browser pane, everything seems to be cleared somehow - not sure if related to react-query but seems weird nonetheless.

[JuanLuisGarciaBorrego]

Any new about this ?
Thanks!

[madelineurl]

Also curious!

[rmcsharry]

Did you go ahead with this @thomasbertet ? If so, some update on how it faired would be very welcome :)

[thomasbertet]

Hi! Sorry for the late update to you all. Unfortunately I don't have update on this. This was an experiment that we did not use in production. So I guess you can try to take this as an inspiration but really no guarantee! Sorry!

[madelineurl]

No worries, thanks for the update and original inspiration!

[edbrett]

I have found a simpler solution using the queryClient API and updating the data from the event source events. Maybe this is an anti pattern for react-query but it works nicely for me. Something along the lines of:

import { useQuery, useQueryClient } from 'react-query'

export const useEventSourceQuery = (queryKey, url, eventName) => {
  const queryClient = useQueryClient()

  const fetchData = () => {
    const evtSource = new EventSource(url)

    evtSource.addEventListener(eventName, (event) => {
      const eventData = event.data && JSON.parse(event.data)

      if (eventData) {
        queryClient.setQueryData(queryKey, eventData)
      }
    })
  }

  return useQuery(queryKey, fetchData)
}

[TkDodo]

why would you do that with useQuery instead of with a normal useEffect ? The problem I see with this approach is that the queryFn can run multiple times due to background refetches, and each time it does, you're leaking an event source and a listener, because there is no way to clean it up inside the queryFn. If you have a query that has a normal queryFn that points to an endpoint that gives you data for your queryKey, you can just use that, and additionally, setup a useEffect that updates via setQueryData. It's pretty much the same concept I have outlined for websockets here: https://tkdodo.eu/blog/using-web-sockets-with-react-query

[edbrett]

Initially I did try this with a useEffect but ran in to some problems, the main one being reusability. In my use case I had I need to call the same hooks that depended on this event source for quite a few components across many views of my application, so in order to do so I needed then to implement some form of global state/context for tracking the event source, and then caching the responses. useState wasn't going to work and the rest of our application depended on react query as our data cache and a universal way to invalidate. react-query gives this for free with the above method through its own context. As for the event source leaking, my example above was a simplification of the actual implementation. I have an additional event listener to close the stream. I'll take a look at the blog!

[reisblucas]

@edbrett Could you share how do you implements the additional event listener to close the stream?

[dan-cooke]

Just for anyone landing here today, most browsers now support fetch streams

So there is no need to use EventSource anymore, you can simply use fetch in your react query

Here's a package from Microsoft that does exactly this

https://github.com/Azure/fetch-event-source

So you could just swap out your fetch function for this one, and you get SSE support inside react query

[asliwinski]

Could you share an example?