Overwrite pageprops from JS

[AdrianMrn]

Is there a way to overwrite or clear a page prop that was set from Inertia PHP?

We submit our forms using Inertia, so we receive our flash messages with error messages from the Inertia page props. After getting a flash message, navigating to another page, and pressing the browser's back button, I'd like to stop the flash message from appearing again.

I'm using the React integration of InertiaJS.

I tried window.history.state.props.flash = null; and

import { usePage } from '@inertiajs/inertia-react';

function MyFn() {
  const { props } = usePage();
  
  useEffect(() => {
    props.flash = null;
  }, []);
}

[sebastiandedeyne]

Also see #78 for a previous discussion :)

[ajnsn]

Hey @AdrianMrn

I use a custom composable for notifications / flash messages within an Inertia application.
At least for me, the issue with the duplicate message on (History-)navigation can be solved by deleting the prop after it's processed.

Some time ago I used transformProps for this. As this is not available any more, I am now using the global success callback/event. It also sucessfully prevents duplicates. This is not the complete code but maybe you get the idea:

import { Inertia } from '@inertiajs/inertia';
import { useNotifications } from './composables';

Inertia.on('success', event => {
    const props = event.detail?.page?.props ?? {};

    if (props.notification) {
        useNotifications().add(props.notification);

        delete props.notification;
    }
});

[AdrianMrn]

@ajnsn Your answer didn't do it for me, but it seems I was incorrectly setting the new state in my first example. I was supposed to use history.replaceState. This works (I run it on both Inertia.on('start', …) and after reading out the server message, no idea why 1 isn't enough):

history.replaceState(
    { ...history.state, props: { ...history.state.props, flash: null } },
    '',
    window.location.href
);