What is the pattern to keep client-state in sync with server-state

[ethan-cao]

Hi 👋

I plan to use React, Redux together with React-query. Redux will be handling client-state and React-query will be resposbile for server-state.

What's the (best) pattern to keep client-state in sync with server-state?

E.g,

const todoList = () => {
  const { data } = useQuery('todo', () => { 
    return axios.get('https://dummyjson.com/todos?limit=10')
  })

  // at this moment,  server-state is available, is this the right moment to update client-state?
  dispatch(updateTodos(data.todos))

  return <div>
     data.todos.map( (todo) =>  <div key={todo.id}> {todo.todo} </div>)
  </div>
}

Thanks.

[TkDodo]

// at this moment, server-state is available, is this the right moment to update client-state?
dispatch(updateTodos(data.todos))

no, it's definitely not, because you cannot call dispatch during render. That makes the render function impure.

To be honest, there is very little need of taking the data from react-query and putting it into any other state management tool. Maybe this read helps: https://tkdodo.eu/blog/react-query-as-a-state-manager

Or you can elaborate why you think you need to put the todos into redux?

[ethan-cao]

Thanks for this great article 👍

My understanding is that using query to fetch server-state is sort of like using selector to fetch client-state. And I guess reducer's job becomes mutation's job.

Does it mean the a slice of state should be derived from either server or client? That's how to use Redux together with React-query?

The reason I aksed this question is that we are using React/Redux for a complext app, and doing an experiment with react-query to see the benefits. To keep everything working, we dont wanna repalce Redux with React-query completely for now. It's just too much effort. In additon, we also need to persist state locally.

[ethan-cao]

is the onSuccess callback a good place to do the sync?

const options = { 
    onSuccess: () => {
        // sync server-state to client-state
        dispatch(updateTodos(data.todos))
    }     
}

const { data } = useQuery(queryKey, queryFunction, options)

[TkDodo]

a useEffect is likely better.

const { data } = useQuery(queryKey, queryFunction, options)

useEffect(() => { dispatch(updateTodos(data.todos)) }, [dispatch, data.todos])

onSuccess will not be called if you have a staleTime set, so you can get out of sync.