setQuery triggers onSuccess

[robinclaes]

Hi, first of all great work on React-query! I love it.

We're doing an app where we need to update the local state based on websockets. To do that I use setQueryData which seems to be the correct solution. That works, but here's where I struggle:

After getting data from the server, I need to open a socket connection for each item in the data. I do this on onSuccess.
The incoming events eventually cause my code to call setQueryData, and apparently this automatically executes the onSuccess callback. The result: a render loop.

It feels to me that setQueryData should not fire the onSuccess.
How could I resolve this? Is there an option like onSuccess that only gets called on a complete fetch/cache invalidation?

PS: where's the direct link to the v2 docs?

[TkDodo]

Hi 👋

It feels to me that setQueryData should not fire the onSuccess.

I have tested this in both v3 and v2, and in both cases, onSuccess seems to be called, have a look: https://codesandbox.io/s/musing-thompson-3h34e

So I guess it is intended, but I would've also thought otherwise 🤔

PS: where's the direct link to the v2 docs?

v2 docs now live under: https://react-query-v2.tanstack.com/

[robinclaes]

Building on your codesandbox, I added a minimal repro - be aware, it crashes.

The use case that I need is quite specific. I basically want to optimistically update the queryData based on events in the socket. The server data however won't be up in that state yet, causing an infinite loop.

https://codesandbox.io/s/eager-turing-yzglw

EDIT: I guess what I'm looking for is a way to set the queryData without it calling onSuccess
EDIT2: The v2 docs seem to have the same contents as the v3 docs.

[TkDodo]

yes, I get that this is breaking, because you call setQueryData in onSuccess of the query that subscribes to setQueryData 🙃 .

After getting data from the server, I need to open a socket connection for each item in the data. I do this on onSuccess.
The incoming events eventually cause my code to call setQueryData, and apparently this automatically executes the onSuccess callback. The result: a render loop.

Only solution that comes to mind is separating the queries that setup the web sockets and the queries that you use for data, something like:

const query = useQuery(
    'getTheSockets',
    fetchFn, 
    {
        onSuccess: (data) => {
            queryClient.setQueryData('realData', data)
            data.map(setupWebSocketForItem)
        }
    }

you can further use useQuery('realData') in your app, and in setupWebSocketForItem, when you receive data, you also write to realData with setQueryData.

I think this should break the loop. Hope that helps :)

[robinclaes]

This solution works!

What would have really helped me, is to know if the data came from the initial request, invalidating the query or setting the query data manually.
Maybe food for thought for a future release, although it's probably not a common use case.

Big thanks for helping me out so quickly!!!

[pawlarius]

Hi @TkDodo, sorry for tagging but I just want to confirm since I can't find this mentioned in the react-query documentation..
Right now I'm using v3 and when using setQueryData it will trigger onSuccess in the useQuery, is this still the expected behavior in react-query v3?

[TkDodo]

Yes, calling setQueryData will trigger onSuccess