RTK Query: Design pattern for socket connection on login, then passed to API middleware?

[joekrall]

I'm really liking RTK Query and how it's helped me simplify data handling and CRUD. I'd like to ask about design patterns around streaming updates.

I'd like to use a middleware similar to what markerikson did here to create a socket connection on login and enable my React app to emit updates to my database, and then having listeners in the API per the docs. However, I can't create multiple connections - there needs to be only one socket connection, one associated with a logged-in user, and which the app can use elsewhere to emit messages.

phryneas's example shows an instance where the socket connection is created when the API is created. Is there a way to pass a socket connection created through middleware to the api middleware? I suppose that would mean socket middleware dynamically updating the api middleware. I probably need to do more digging into createApi, but wondering if anyone can give pointers in the direction of solutions or alternatives.

[markerikson]

The simplest option would probably just be to keep a reference to the socket instance in a module file somewhere, with getters and setters if needed, and use that in both places.

[phryneas]

Of you keep in in thunk's extra object and dynamically update that.

[joekrall]

Follow-up: I'm choosing to use the extra object per @phryneas. I'm still learning TypeScript - within createApi, how do I appropriately type the extra object for access within the onCacheEntryAdded function? Right now, it is typed as 'unknown`.

[markerikson]

I skimmed through the source, and right now I don't think there is a way to pre-specify the type of extra here. You'll have to manually cast it, like:

      async onCacheEntryAdded(
        arg,
        { extra }
      ) {
        const websocket = extra as MyWebsocketType

        // do stuff with websocket here
      }

[joekrall]

Thank you both again!

[User6531]

Hello everyone, currently I have the same requirement to have only one connection per app. I really like @phryneas solution with middleware and extra arguments, but I'm not entirely sure how to implement it.
Could you please provide a small example of implementation?
I would greatly appreciate it.