Inertia: Hijack Inertia responses before they get applied

[sebastiandedeyne]

I'm working a team settings page, /teams/1/settings. It also has "Create team" button somewhere. That button opens a modal, which has a simple form that submits with Inertia. After that, the user gets redirected to /teams/2/settings, the new team's settings page.

I need preserveState: true on the form so the form errors are correctly displayed. No problems there.

However, since I'm preserving state, /teams/2/settings also has some "zombie state" from /teams/1/settings, like the modal that doesn't close or other form values that are incorrect.

This means I only know whether I want to preserve state or not based on the response.

---

I'm not sure what the correct solution for this problem would be. Modifying the preserveState value based on the response would solve this specific use case.

However, I've had other places where I wanted to do something after a visit based on the response, and maybe hijack Inertia's behaviour. Something generic like #44 could solve a broader set of problems. While I still stand by my original comment that it's not "idiomatic Inertia", it would be nice to have an escape hatch.

[devcircus]

Thanks for bringing this issue to my attention on Discord. I've dealt with this a few times in similar scenarios (all involving modals and form submissions). In the meantime, Using inertia-vue/inertia-laravel, I've gotten around it by "watching" the $page.errors property and making these decisions there.

I'm going to revisit my implementation with fresh eyes and see if I can find a different approach.

[devcircus]

Just checking to see if you've had any insights concerning this situation. I'm now facing this exact issue and can't hack my way around it.

[sebastiandedeyne]

I was thinking about allowing callbacks as properties for preserveState and preserveScroll. The callback would receive the new page props so you can make decisions based on those.

Simple example:

Inertia.post('/teams/create', { 
  preserveState: page => Object.keys(page.errors).length, 
});

This would preserve the state of there are errors; or completely rerender if the form was succesfully submitted.