Optimistic Updates

optimistic-update.js

const useNormalizedApi = () => {
  let db = useDB();
  
  return {
    ...
    updateTodo: async (id, payload, oldTodo) => {
      // Let's assume the update will be successful
      let normalizedTodoData = normalize(payload, TodoSchema);
      db.mergeEntities(normalizedTodoData.entities);
      try {
        let todo = await api.updateTodo(id, payload);
        // If successful, let's update again to make sure we have the latest todo data
        normalizedTodoData = normalize(todo, apiSchemas.updateTodoResponseSchema);
        db.mergeEntities(normalizedTodoData.entities);
      }
      catch(e) {
        // If update fails, let's normalize the old todo and merge it back into the db
        normalizedTodoData = normalize(oldTodo, TodoSchema);
        db.mergeEntities(normalizedTodoData.entities);
      }
    },
    ...
  };
};
  
const TodosComponent = (props) => {
  let db = useDB();
  
  let allTodosQuery = db.getStoredQuery('ALL_TODOS');
  let todos = db.executeQuery(allTodosQuery);
  
  return (
    <JSON data={todos} />
  )
}