blog/using-web-sockets-with-react-query

[utterances-bot]

Using WebSockets with React Query | TkDodo's blog

A step-by-step guide on how to make real-time notifications work with react-query

https://tkdodo.eu/blog/using-web-sockets-with-react-query?utterances=384634b31fbf3b2402057419SLRNNy81DMv4SwPhX1mtGHUUp5bKRxm4Fv8yoX%2B8%2BjOHOF3Gxii%2FaIyoCCfGvpa99Z4OrKXWTZBA6S7gdL9fkfrfoatqTppPuThtDYdjF7xQSRTVrUpOkNEGrg4%3D

[Lueton]

Great article! In our company we use the same principle as described under "event-based-subscriptions". It works flawlessly and has several advantages over sending objects.

[morijenab]

Thanks for the useful article!
lets imagine we have too much push from the server, and if we rerender base on these pushes the app will crash.

In our project we create a single ton pool from the subscribed data and periodically call a force renrender callback to make new data reflection on the DOM.
its a bit cumbersome and complicated code! is there any way to handle this scenario with react query?
I consider the staleTime option but we may miss new data witch might not be updated after staleTime

[TkDodo]

In think throttling the websocket updates, storing intermediate results in a ref, might work. But I don’t think that the app should crash because of too many updates. Maybe you’re re-rendering the whole application every time instead of just the parts that are interested in the update?

[jayporta]

What is the purpose and benefit of using React Query for web sockets?

[TkDodo]

@jayporta The purpose of websockets is to get live notifications of events happening on the server. The purpose of react-query is to manage async state in React. Queries and subscriptions are not the same, but they go well together. You can of course manage your subscriptions outside of React Query, but you'll likely be overpushing data, depending on your subscription model. You can also turn websockets on and off and the queries will still continue to work if the data lives in react-query.

[sergiycheck]

why not using immutable updates of normalized data inside queryClient.setQueriesData method or even use immer, it would be way easier I certify

[TkDodo]

You can definitely use immer alongside react-query to make deep updates easier. For the examples, I prefer not to use any 3rd party libs. It might indicate that mutating state in the setQueryData callback is okay for people unaware of immer :)

[i0boy]

soooo nice! thanks you

[gtwebsite]

You probably don't want to use it on websocket or any streaming. React Query is not meant to do this. Instead, make a global state and your initial value is coming from your react query, then update your state using simple old reducer. You dont want to keep your components rerendering when using data. Partial update in react query will rerun the hook

[p6l-richard]

@TkDodo, where do you call the useReactQuerySubscription() hook?

The article doesn't explain it and from merely reading it, it's not completely obvious because a hook call without storing anything in a variable is something I see rarely:

function App() {
  useReactQuerySubscription()
  
  const { data, isLoading } = useQuery('todos', fetchTodos)
  
  if (isLoading) return <div>loading..</div>
  
  return data.map((todo) => <p>{todo.title}</p>)
}

[p6l-richard]

(sorry, I missed a div and was unable to edit my original post)

  useReactQuerySubscription()
  const { data, isLoading } = useQuery('todos', fetchTodos)
  if (isLoading) return <div>loading..</div>
  return (
    <div>
      {data.map((todo) => (
        <p>{todo.title}</p>
      ))}
    </div>
  )
}

[TkDodo]

yeah it just goes to the root of your App, but inside your QueryClientProvider of course.

[rlesniak]

I appreciate your all articles about RQ, awesome.

About this post. You provide simple example, but can you tell me how would you handle dynamic data but in list with pagination? I am facing that case right now and its really difficult...

[TkDodo]

not sure I understand the question to be honest ...

[rlesniak]

I posted that case here TanStack/query#4252 (comment)

If it is still not clear, I'll try to create some sandbox. hmm?

[TkDodo]

I'll try to create some sandbox. hmm?

yes please

[albertgronholm]

How do I actually access the data I have set with setQueryData? I got it kind of working by using useQuery without giving the second parameter (fetch function), but that doesn't seem good as you get an error message in console about the missing query function...

[TkDodo]

Usually there should always also exist a queryFn to fetch the resource. Otherwise, storing that data in react-query doesn't make much sense: You could just as well take the data that comes from the websocket and put it into a zustand store or a jotai atom or react-context or whatever.

[CarlosZiegler]

Great articule with some Details , Thanks for sharing

[kawfong]

Really appreciate the amazing content! Thank you. It'd be great if you can include an example of sending a payload from the client side as well.

[Krakof]

Hi
Thanks for the great react query guide.
My question: Is it correct to use mutation with dynamic params to fetch data?
Example: I get event with specific params via ws, depending on these params I can fetch data or perform some additional logic. All this stuff I do in ws event listener. Fetched data can be used to update context for example.

[TkDodo]

you'd usually have a query with that params that you can invalidate, which would trigger a refetch.

[Krakof]

Params come with ws event, as I remember I can't change query params on referch.

[TkDodo]

I don't understand. I guess I'd need to see it 😅

[bk973]

This is a great post... Thank you so much. I have been using websockets with redux and it was full of flaws. I ran into race conditions and useEffect-related trouble.

[ashuvssut]

In react query, Is there a way to set isLoading state manually (using query key)?

I am using websocket with react query. I found TkDodo's awesome blog on this

I want to follow the approach in which I receive 2 things from backend in one WS message:-

1. query key to do queryClient.setQueriesData()
2. data payload

But when using websocket I also want loading is fetching states.

Since I am using websockets there is no Request promises i guess. Thus, I get no **isLoading, isFetching **states

Is it possible to manually set these two states? My backend can send flags in each message to tell if data sending is complete or not.

my usecase:- I have a long running process whose data is sent to frontend every second and it eventually ends at some time. I want a loading state for this thing

[ashuvssut]

Sorry, I just copy pasted my comment from a forum. I was unable to get help from there. so I posted it here

This is a great post! Tqsm

[Lueton]

I hope i did understand your question correctly. At work we combined react-query with websockets by writing a promise based interface. I'll try to give you an idea:

1. Send request { queryKey: "xyz", requestId "uniqueId" } from frontend to backend via websocket.
2. Additionally create a promise and save it in a cache like const cache = {}; cache[requestId] = promise;
3. Receive the answer from backend { queryKey: "xyz", requestId "uniqueId", data { ... } }
4. Find correspondending requestId in cache and call it with promise.resolve(data)

With that you can achieve the same behavior as with http calls. Hope that helped.

[gavinsykes]

Thanks so much for this article, I'm just getting started with both Websockets and React Query myself (I really don't know why I left React Query for so long!)

One thought that I've had, leading on from your last bit talking about staleTime: would you foresee any issues wrapping your app in 2 QueryClientProviders? One for 'standard' queries and one for websockets?

const queryClient = new QueryClient();
const webSocketClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: Infinity
    }
  }
});

export default function App({ ...pageProps}) {
  return (
    <QueryClientProvider client={queryClient}>
      <QueryClientProvider client={webSocketClient}>
        <Component {...pageProps} />
      </QueryClientProvider>
    </QueryClientProvider>
  )
}

[TkDodo]

useQuery can only read from the nearest context provider, so it would only see the inner one. This will only work if you pass a client directly to all useQuery calls that need to see the outer provider:

useQuery(options, queryClient)

[gavinsykes]

Ah yes of course, it's the same hook! A custom provider with its own hook should do the trick then I would think. So, along with a bit of tidying up:

// src/providers/WebSocketProvider.tsx
const webSocketClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: Infinity
    }
  }
})

export function WebSocketProvider({ children }) {
  return <QueryClientProvider client={webSocketClient}>
    {children}
  </QueryClientProvider>
}

export const useWebSocketQuery = (options) => useQuery(options, webSocketClient)

[Philip-Isaacs]

I'm a bit stuck on trying to get this working. I've reread through this article but somehow I'm missing something because I can't seem to get the data I need back from the Web-Socket.

Here's basically what I have.

function getTranslations(ws) {

   const request = {
       locale: 'en',
       request: true,
   }

   ws.emit('translations',request) // Request data via web-socket
}

const Context = createContext();

const Exam = (props) => {


    const queryClient = useQueryClient()
    
    useEffect(() => {
          // Consume response via websocket

          props.ws.on('translations_web_socket',(response) => { 
      
              queryClient.setQueryData(queryKey, (response) => {
                   return [{...response}, 'copy'];
               });
       });
    }, [queryClient]);

        const {data, isLoading, status } = useQuery({ 
            queryKey: ['copy'],     
            queryFn: getTranslations(props.ws) 
        })

    if (isLoading) return <h4>Loading ...</h4> 
    if (status === 'error') return <h4> Error, something bad has happen</h4>

    return (
        <div> 
            <Context.Provider value={[props.ws]}> 
                <I18n locale={lang} allowMissing={true} messages={data}>  // I'm trying to resolve the data parameter here
                    <>
                        <List_Filter/>
                        <Editor /> 
                    </> 
                </I18n> 
            </Context.Provider> 
        </div> 
    ) 

[Lueton]

Well it does not work like this. You cannot treat you getTranslations function as a valid queryFn especially because it does not return a promise. So the query will not be able to retrieve data correctly. Also im a concerned the parameters of setQueryData are incorrect.

If you look at the codesandbox example of the websocket blogpost you can see, that useQuery is used with usePosts which does fetching with http and promises. The websocket will only set data with setQueryData. Also keep in mind that states like isLoading will not change when fetching new data using a websocket.

There are multiple approaches on how to use websockets with react query but this depends on the specific use case in your app.

Hope it helped a bit :)

[Philip-Isaacs]

Hey Lueton, Thanks so much looks like I misunderstood. My project uses web-sockets but not promises currently.

[Lueton]

Im glad! If this is the case you basically have two options. Use fetching library or native fetch and build your queries with http promise based functions and use it together with native websockets (like in the codesandbox example). The second option would beto make your websocket promise based. Which is quite easier than it sounds at first.

[ooter37]

Thanks for article and all the amazing things you do.

I was wondering if useMutation integrates with websockets? Can you use a mutation to send websocket messages? Will onSuccess, onError, etc. work? Do you have an example of this pattern? Thanks!

[TkDodo]

does sending a message give you a Promise ?

[ooter37]

It doesn’t. I’m not sure if there’s a way to implement websockets where it does, this is my first time using them, and I’m using this package https://www.npmjs.com/package/react-use-websocket

[TkDodo]

sendMessage doesn't return anything so you don't need to wrap it in a mutation. It seems to be fire-and-forget

[ooter37]

That makes sense. If you’re building an app with websockets and react-query, is that how you would do it? Or would you return a promise (maybe with something like this https://github.com/vitalets/websocket-as-promised) and then use useMutations?

[TkDodo]

i think just firing should be fine as you don't expect a response to your mutation, so it doesn't really have a lifecycle

[Aboagye-Dacosta]

thanks for the article. Really broaden my understanding. Great work