Dedicated OnlineManager as an option for each query/mutation

[kapobajza]

Hello!

I recently started working with WebSockets and I wanted to hook up the connect/disconnect/reconnect events with TanStack Query. But it seems like that isn't possible at the moment, since I can set up only one onlineManager.

The solution I had in mind for this is to have a dedicated onlineManager as an option for each query and/or mutation. That way I could hook up that onlineManager to my WebSocket events. And, since I am working in React Native, create a dedicated hook (useWebSocketQuery), which will just overwrite the existing onlineManager. Something like:

import { useQuery, UseQueryOptions } from '@tanstack/react-query';

import WebSocketOnlineManger from '...';

function useWebSocketQuery(options: UseQueryOptions) {
  return useQuery({
    ...options,
    onlineManager: WebSocketOnlineManger,
  });
}

export { useWebSocketQuery };

What do you think about this? Is there any other solution, which I am not aware of?
If this is feasible and you give the green light for it, I can work on it and create a PR if necessary. I've already looked up the source code and I have already some ideas on how to approach it. However, I would probably need some minor guidance.

Btw, this has been briefly mentioned in this discussion.

Thank you 😄

[TkDodo]

I recently started working with WebSockets and I wanted to hook up the connect/disconnect/reconnect events with TanStack Query. But it seems like that isn't possible at the moment, since I can set up only one onlineManager.

can you elaborate a bit what websockets have to do with the onlinemanager?

[kapobajza]

Well, websockets have also kind of an "online/offline" state. I mean if they're open, that could count as online and if they're closed (not deliberately), that could count as offline.

Here's an example:

import { onlineManager as wsOnlineManager } from '@tanstack/react-query';

wsOnlineManager.setEventListener((setOnline) => {
  const openCb = () => {
    setOnline(true);
  };

  const closeCb = (e: WebSocketCloseEvent) => {
    // 1000 is the code for a normal, deliberate closure
    if (e.code !== 1000) {
      setOnline(false);
    }
  };

  ws.addEventListener('open', openCb);
  ws.addEventListener('close', closeCb);

  return () => {
    ws.removeEventListener('open', openCb);
    ws.removeEventListener('close', closeCb);
  };
});

[TkDodo]

I wouldn't say that they are related. The way we're using websockets as described in my article is that we still invalidate queries after we get a websocket message.

if you don't want queries to refetch by themselves when they are updated via websockets, I'd just set staleTime:Infinity on them, or maybe enabled:false if you don't even want the initial fetch ...