Infinite patch loop when applying reversePatch after a rejected request in onPatch

[cdes]

I'm building an app with optimistic updates, and I'm using onPatch to send patches to the backend to sync my store with the backend.
Sometimes the request fails and I apply reversePatch on the store to revert the changes.

But this causes an infinite loop like this:
User does something -> onPatch triggered -> try sync patch -> fail -> applyPatch(reverse) -> onPatch triggered -> try sync reverse patch.. etc

You can see the example here:
https://codesandbox.io/s/mobx-state-tree-apply-reversepatch-68b3o?file=/src/App.tsx

Update:
For future reference, this is the code that makes the problem:

import { render } from "react-dom";
import { types, onPatch, applyPatch } from "mobx-state-tree";

import { observer } from "mobx-react-lite";

const ScreenModel = types.model({
  id: types.identifier,
  name: types.string
});

const AppModel = types
  .model({
    screens: types.array(ScreenModel)
  })
  .actions((self) => ({
    createScreen(screen) {
      self.screens.push(screen);
    },
    removeScreen(screen) {
      self.screens.remove(screen);
    }
  }));

const StoreModel = types
  .model({
    app: AppModel
  })
  .actions((self) => ({
    removeScreen() {
      self.app.removeScreen(self.app.screens[0]);
    }
  }));

const store = StoreModel.create({
  app: {
    screens: [
      {
        id: "1",
        name: "Screen 1"
      }
    ]
  }
});

onPatch(store, async (patch, reversePatch) => {
  // simulate sending the patch to the backend
  new Promise((resolve, reject) => {
    // fail to sync the patch
    setTimeout(() => reject("fail"), 1000);
  }).catch((error) => {
    // apply the reverse patch patch to undo
    // this will do on infinitely because
    // applying reverse patch will trigger
    // onPatch again
    console.log(error);
    applyPatch(store, reversePatch);
  });
});

function App() {
  return (
    <div className="App">
      <button
        onClick={() => {
          const count = store.app.screens.length + 1;
          store.app.createScreen({
            id: `${count}`,
            name: `Screen ${count}`
          });
        }}
      >
        Add Screen {store.app.screens.length + 1}
      </button>
      <pre>{JSON.stringify(store, null, 4)}</pre>
    </div>
  );
}

const ObserverApp = observer(App);
const rootElement = document.getElementById("root");
render(<ObserverApp />, rootElement);

[EmilTholin]

Hi @cdes!

I'm not sure if there is a better way of fixing this, but I ran into this problem myself recently, and ended up temporarily disposing the patch listener, applying the reverse patch, and then started listening to patches again.

In you example, that would be something like:

let disposer: IDisposer;

function unlisten() {
  disposer();
}

function listen() {
  disposer = onPatch(store, async (patch, reversePatch) => {
    new Promise((resolve, reject) => {
      setTimeout(() => reject("fail"), 1000);
    }).catch((error) => {
      unlisten();
      applyPatch(store, reversePatch);
      listen();
    });
  });
}

listen();

[cdes]

@EmilTholin Thanks for the descriptive and prompt response!

Honestly? This seems "hacky"...

I thought there is something I'm missing, like a special version of applyPatch that does not trigger onPatch XD.

Thanks though <3

[EmilTholin]

Yes, I agree that it stings a bit. This is the approach used by the recordPatches API, so it's not inherently wrong.

[cdes]

Haha! I was trying to use recordPatches yesterday XD. Thanks for pointing it out and confirming my "intuition".
I think this approach is the way to go then.

Thanks <3