Flash Data with InertiaJS

One confusing situation I have run into with InertiaJS is how to return small pieces of data back to the current page after creation without using an API and without redirecting to a new page. Seems pretty niche, right? Consider this. Say you have a modal or a slide out with 2 steps. In the first step, you create a resource like an access token. Once the token is created, you adjust the view and let the user copy the token before it disappears. All without changing the page URL or using an API.

Before we solve this problem, there isn't any reason why you CAN'T use an API endpoint and make an axios request. The goal is to just to just use as much built into Inertia as possible without having to over-engineer.

How I Solved This Using Flash Messages

When reading the InertiaJS documentation, they talk about Flash Messages. It's meant for returning temporary shared data that's set to the session for the next request. This sounded exactly like what I needed!

However, I didn't want to redirect. I wanted to return this data to the current page or component. Let's use the Access Token example. A real life example that I implemented in the v1.1 of Self Host Pro. We have a modal to create an access token. The user submits the data (name and team) to the server. The server then persists the data and returns the generated token, only available for one view, for the user to copy and save. When the token is created, the form UI disappears in the modal and the token is available for copying. No redirect to a different URL.

Set Up Your Middleware

Copied directly from the documentation, you need to ensure your HandleInertiaRequests middleware is set up to share the flash data.

class HandleInertiaRequests extends Middleware
{
    public function share(Request $request)
    {
        return array_merge(parent::share($request), [
            'flash' => [
                'message' => fn () => $request->session()->get('message')
            ],
        ]);
    }
}

Now that we have that configured, we can work add our functionality.

Build Your Form

Let's use the simple form for making an access token. When submitted, this will create the token and return it back to the page or component and we can show it without redirecting. Our form looks like this:

import { useForm, usePage } from '@inertiajs/vue3';

const form = useForm({
    team: '',
    token_name: ''
});

Love the little composables that ship with InertiaJS!

Submit Your Form

Using the the useForm() composable, we can submit the form to our store access token endpoint:

form.post(route('teams.access-tokens.store', { team: team.value.id }), {
    onSuccess: () => {
        // Handle success
    }
});

Once you handle and store the access token, this is where the magic happens:

public function store(StoreAccessTokenRequest $request, Team $team)
{
    $accessToken = ( new StoreAccessToken( $team, $request ) )->store();
    
    return redirect()->back()->with('message', [
        'action' => 'access.token.created',
        'data' => [
            'token' => $accessToken
        ]
    ]);
}

See the return redirect()->back()->with('message', [...])? Alright, so what this is doing is once we create the access token, we are redirecting back (back to the page the user came from), which in InertiaJS is kind of a hack to reload the props. Your modal won't close, and your page will remain the same.

Also notice that we are redirecting back with message. This is what gets set to the flash variable in our InertiaJS middleware making it accessible everywhere. And only accessible for one request.

Retrieve the Data In Your App

Now that we've created the token, redirected back with the token, let's show it! Remember on redirect->back() we essentially reload all page props. To access the flash data, simply add this to your page/component:

import { usePage } from '@inertiajs/vue3';
import { computed } from 'vue';

const flash = computed(() => usePage().props.flash);

Notice that we are wrapping the prop in computed? This way, on initial page load, when there is nothing set in the "flash", it will be null, but when we refresh on our redirect()->back() it will be set with data.

This allows us to display our access token either in the template or run a function with it by using:

<div>
    {{ flash.message.data.token }}
</div>

Super slick way to dynamically create and fetch data without an API!

Conclusion

I hope this helped shed some light on what's possible using flash data and InertiaJS! If you have any questions or want more info, reach out on X (formerly Twitter) or hop on our Discord.