T
TanStack•2y ago
xenial-black

Does ReactDom's flushSync works with setQueryData in same way as it works with setState()?

In reference to this example in react docs(https://react.dev/learn/manipulating-the-dom-with-refs#flushing-state-updates-synchronously-with-flush-sync) where flushSync API from React DOM can be used to sync DOM to state updates synchronously, Can we wrap setQueryData call for a active query in flushSync callback and expect to access the updated DOM for scrolling etc? 
//usage with setState
const scroll=()=>{
    
    //scroll to newly added todo item
    flushSync(() => {
        setTodos([ ...todos, newTodo]);
      });
      listRef.current.lastChild.scrollIntoView();

}

//Usage with setQueryData
const scroll=(newTodo)=>{
    
    //scroll to newly added todo item
    flushSync(() => {
       queryClient.setQueryData('todos',(oldTodos)=>[...oldTodos,newTodo]
        // update query data for an active query
       )
      });
      listRef.current.lastChild.scrollIntoView();

}
//usage with setState
const scroll=()=>{
    
    //scroll to newly added todo item
    flushSync(() => {
        setTodos([ ...todos, newTodo]);
      });
      listRef.current.lastChild.scrollIntoView();

}

//Usage with setQueryData
const scroll=(newTodo)=>{
    
    //scroll to newly added todo item
    flushSync(() => {
       queryClient.setQueryData('todos',(oldTodos)=>[...oldTodos,newTodo]
        // update query data for an active query
       )
      });
      listRef.current.lastChild.scrollIntoView();

}
I tried and it doesnt work. If it does not, what is the alternative?
Manipulating the DOM with Refs – React
The library for web and native user interfaces
6 Replies
xenial-black
xenial-blackOP•2y ago
@M00LTi , @TkDodo 🔮 , can you please help me out here?
other-emerald
other-emerald•2y ago
are you doing this with a useMutation? i guess you should do the queryClient update inside the onSuccess of useMutation and the scrolling in the onSuccess of mutate
xenial-black
xenial-blackOP•2y ago
Yes @M00LTi , I am doing it inside the onSuccess callback of a useMutation hook.
other-emerald
other-emerald•2y ago
So did you follow my instructions?
xenial-black
xenial-blackOP•2y ago
Yes, I have the exact same setup as you explained
other-emerald
other-emerald•2y ago
Show it

Did you find this page helpful?