Approach for handling web-sockets with react-query

[Manish3323]

I am looking for suggestions / ideas for consuming web socket based callback api in frontend.

Dummy project setup looks like following :
we have a callback based web socket api in our library, which streams backend data (say todo list).

API looks like this :

interface  TodoService {
      todoStream(): (callBack: (event: TodoEvent) => void) => Subscription
}

---

At frontend : we are trying out 2 approaches to consume this above api.
one with react-query & another without (i.e using custom react-hooks)

1st approach using react-query looks something like this

imp thing to notice here that we are using useQuery only for client-side state maintenance & not actually making backend calls in useQuery

export const useTodoList = (): UseQueryResult<Todo[], unknown> => useQuery('todos', () => [])


export const useTodoStream = (todoService: TodoService): void => {
  const qc = useQueryClient()

  useEffect(() => {
    const callback = (event: TodoEvent[]) => qc.setQueryData('todos', event.data)
    
    const subscription = todoService.todoStream()(callback)

    return subscription.cancel
  }, [todoService, qc])
}

Let's say, useTodoStream will be plugged in parentComponent of react application tree.
& useTodoList will be consumed by component1 & component2.

in this approach,

1. we only create one web socket connection,
2. we get the reactiveness i.e. whenever new todos snapshot is received & because of react-query, components are re-rendered with new data.

---

2nd Approach involves useEffect, useContext hook

const TodoContext = createContext<Todo[]>([])

const TodoContextProvider = ({
   todoService,
  children
}: { 
  todoService: TodoService
  children: React.ReactNode
}): JSX.Element => {
  
  const [todos, setTodos] = useState<Todo[]>([])
  useEffect(() => {
    const callback = (event: TodoEvent[]) => setLocation(event.data)

    const subscription = todoService.todoStream()(callback)

    return subscription.cancel
  }, [todoService])

  return <TodoContext.Provider value={todos}>{children}</TodoContext.Provider>
}

export { TodoContextProvider, TodoContext }

using this context + useEffect approach :

1. we get reactiveness on child component whenever new todos are recieved.
2. no need to use react-query in this approach

---

Question :
Do you see any advantage of using react-query over vanilla context+hook

Note that we already depend on react-query for other request/response and mutation API's