How to trigger a function with Inertia on load if Laravel's session has a message?

[Drillan767]

I'm trying to do something that seemed simple at first, but I can't make it work properly.

Basically, I have a list of users, and if I click on a button to accept or delete them, I trigger an Inertia.post() that makes a treatment in a controller, then it redirects back to the page with a message such as

return redirect()->back()->with('success', 'Stuff successfully done');

My goal here is to display a Sweetalert message that displays the success message. I already edited my AppServiceProvider with an Inertia::share() function so I have my Session's status visible from the vue toolkit on my browser.

So I tried to display the Sweetalert message on success from Inertia like so:

this.$inertia.post(`/something/${id}`, {
    onSuccess: () => Swal.fire('Stuff is done');
})

But it didn't work because the page reloads. Then I tried to check with mounted() if I had a session message to display, and if so, to trigger Sweetalert, like so:

mounted () {
    if (this.$page.props.flash.success) {
        console.log('Session has something!');
        Swal.fire('Session has something!');
    }
}

Nothing gets displayed unless I try to display the flash message directly in my template, and then it works, but that's not what I want to do. I feel like I'm missing something obvious, but what?

Thanks in advance

[ajnsn]

@Drillan767

But it didn't work because the page reloads.

Please take a look at the preserveState option. Example:

this.$inertia.post(`/something/${id}`, {
  preserveState: true,
  onSuccess: () => Swal.fire('Stuff is done');
})

[oidre]

You can create swal component to control showing flash.success or flash.error, then put that component inside pages component wherever you want to use

[claudiodekker]

Hi,

When using Inertia.post, by default the preserveState feature is being used. This means that as long you redirect back to the same Inertia page, the page's state (videos that are playing, input fields with text in them, etc..) are kept, and only the page's props are updated with the new state from the server.

Often times, this is exactly the thing you want, as this way those updated props reactively trigger a (partial) re-render of your page without accidentally 'losing' the user's context. However, as you have noticed, there are some gotcha's with this: The lifecycle hooks (including mounted) aren't called again, as the (page) component itself is never truly recreated.

That said, since the props are updated, this means that we can set up a watcher and trigger the SweetAlert based on that:

{
  props: {
    flash: Object,
  },
  watch: {
    'flash.success'(value) {
      if (value !== null) {
        Swal.fire(value)
      }
    }
  }
}

Keep in mind that this won't work directly when the page loads, and will only work when the page props are changed. If you want to also trigger them whenever the page component does get rendered for the first time (e.g. when changing a page), you might want to set up a watcher with the immediate option instead:

{
  props: {
    flash: Object,
  },
  watch: {
    'flash.success': {
      immediate: true,
      handler(value) {
        if (value !== null) {
          Swal.fire(value)
        }
      }
    }
  }
}

Hope this helps!