Inertia: How to show a toast after creating/updating/deleting data on the server?

[veeral-patel]

Say I'm working on a todo app.

After the user creates, updates, or deletes a todo item, I'd like to be able to show a toast message.

With a separate API, this is easy: just show a toast after receiving a response to my API calls.

But is doing this possible with inertia? Or would I just need to use a flash message instead?

Now, let's say that the component for creating/updating/deleting todo items is in a modal. Would I need to render the flash message in the modal?

[francoisauclair911]

I suggest taking a look at this, I would flash the session and listen to props change on the frontend and toast your notification

Server side

  Inertia::share('flash', function () {
            return Session::get('messages', (object) []);
        });

Frontend

watch: {
      pageFlashes: {
        handler (flashes) {
          _.each(flashes, (flash, index) => {
            this.$toasted.global[index](flash)
            this.pageFlashes = 'EMPTY'
          })

        },
        deep: true
      },

Mixins

Vue.mixin({
  data: function () {
    return {}
  },
  computed: {
    pageFlashes () {
      return this.$page.flash
    },
  },

[veeral-patel]

@francoisauclair911 thanks!

and just to make sure - how am I supposed to create/update/delete data on the server, exactly, from my frontend?

do I need to add API endpoints for these operations?

[francoisauclair911]

Yes you would have a normal route.php file

Route::post('posts', 'PostController@store')->name('posts.store')

And in your PostController.php store method make sure to return the appropriate response (normally a redirect) that will tell inertia to only reload the required props.
see https://inertiajs.com/redirects for more information

[veeral-patel]

@francoisauclair911 Thanks! The main thing that attracted me to inertia was the possibility of creating a SPA without creating an API first.

But it seems like you do need to create API endpoints for all operations that modify data on the server (creates/updates/deletes). Is that right?

[francoisauclair911]

Well you need to create you normal route like you would on a laravel app using blade view.
I'm not sure you understand really what inertia is suppose to do and I recommend you go through the documentation again.

At one point how do you think the application knows what/how to create your models? You'll need to use route and controller in any applications you build no matter if you use inertia, live wire, a spa or anything.

[veeral-patel]

@francoisauclair911 thanks for your reply. good point. I was thinking that Inertia might let me somehow invoke functions from the backend on the frontend, which would obviate the need to write controllers that take in and output JSON.

this way, I could just call functions from my service layer in my JS code, allowing me to not have a web (aka API) layer at all.

[francoisauclair911]

Hmm maybe you should try using serverless functions and nuxt front-end and move away from laravel if you only need really simple API logic /response

[19peaches]

@francoisauclair911

I've set up my notifications as you suggested above, I was previously implementing the set up used in the Ping app. But I cannot seem to get the watcher to ever pick up any notification sent with a redirect.

For instance I set up a login success message. When I arrive on my dashboard page and inspect the props, I can clearly see in the shared props I have a success flash message, but it will not trigger the watcher. I set up some other flash messages that do trigger it, so I know the watcher is functioning to some degree, but can you think of any reasons why it would not see a messages that's clearly defined in the props?

Thanks

[druc]

I know I’m late to the party but I’ve made a video on this if you still haven’t figured it out: https://youtu.be/r2hfTpz1oqA

[reinink]

So, it's totally possible to show messages like this. The ideal way of doing this is using flash messages server-side, and then passing those flash messages to Inertia using the "share" feature.

We have a section in the docs about this, which you can find here: https://inertiajs.com/shared-data#flash-messages

[seewhy17]

So, it's totally possible to show messages like this. The ideal way of doing this is using flash messages server-side, and then passing those flash messages to Inertia using the "share" feature.

We have a section in the docs about this, which you can find here: https://inertiajs.com/shared-data#flash-messages

I am trying out inertia.js for the first time, the journey has been smooth so far.
using Laravel Framework 8.20.1
I am trying to display flash messages, I saw the recommended HandleInertiaRequests Middleware in the link above, but I can't seem find it.
but then there is a flash property within the jetstream object of the response.

{"component":"Applications\/Register","props":{"errors":{},"jetstream":{"canCreateTeams":false,"canManageTwoFactorAuthentication":true,"canUpdatePassword":true,"canUpdateProfileInformation":true,"flash":"the post is saved!","hasApiFeatures":false,"hasTeamFeatures":false,"managesProfilePhotos":false},"user":null,"errorBags":[],"currentRouteName":"applicants.create"},"url":"\/apply","version":""}

What is the recommended way to deal with Flash messages?

[reinink]

@seewhy17 What version of Inertia are you on? Are you using Jetstream?

[seewhy17]

@seewhy17 What version of Inertia are you on? Are you using Jetstream?

Yes I am using Jetstream, at time of the question I was using:

λ npm list --depth 0
C:\wamp64\www\freeclass
+-- @inertiajs/[email protected]
+-- @inertiajs/[email protected]
+-- @inertiajs/[email protected]
+-- @tailwindcss/[email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]

[reinink]

Yeah, that's what I figured. The HandleInertiaRequests middleware came later on, not in the version of inertia-laravel that Jetstream uses. You can upgrade your app, but, fair warning, it's a bit of a process. See this comment. Plus, you'll need to look through the Laravel adapter releases: https://github.com/inertiajs/inertia-laravel/releases

In Jetstream 2.x (which is coming out soon), all of this has been updated. It might be easier for you to just wait for that.

[seewhy17]

Yeah, that's what I figured. The HandleInertiaRequests middleware came later on, not in the version of inertia-laravel that Jetstream uses. You can upgrade your app, but, fair warning, it's a bit of a process. See this comment. Plus, you'll need to look through the Laravel adapter releases: https://github.com/inertiajs/inertia-laravel/releases

In Jetstream 2.x (which is coming out soon), all of this has been updated. It might be easier for you to just wait for that.

Thanks for the reply I will check the links. I already have conflicts with the InertiaForm from 'laravel-jetstream after updating
@inertiajs/inertia and @inertiajs/inertia-vue

[reinink]

@seewhy17 Good luck! Inertia development has been moving really fast the last few months, and there have been quite a few breaking releases. That good...because the library is getting better...but bad because it's hard to update your app. Hopefully once we hit 1.x things will slow down. 👍