Jetstream | Inertia.js - how to &#39;return back()-&gt;with()&#39;

Level 102

I personally use it like this, and it works perfectly

return redirect()->back()->with('success_message', 'Yay it worked');

mafudelaptu

Level 1

dont work for me :(

how to access the "success_message" variable in Vue? do i have to setup some ServiceProvider?

Sinnbeck

Level 102

You either get it from the page props (if on in the page vue file)

props: {
      success_message: String,
    },

Or using the $page helper (can be used anywhere)

<div>{{ $page.props.success_message }}</div>

spidey

Level 17

I`m in the same scenario. Not able to return data using return back()->with('key', 'data'); . It only works using return Inertia::render('Homepage')->with('key', 'data'); but in this case, the route turns to mywebsite.com/submitForm which is a POST request, and if I refresh the page, an error is thrown becuase of this.

2 likes

[email protected]

Level 7

Yea, I actually wasn't able to figure it out (didn't have time). To make them available, you need to pass it in the render method, which is not that useful, when you need to return back from a POST request to the original GET route, so you can't directly call the Inertia::render() method.

chilldsgn

Level 16

@spidey I had the same issue and found this answer by Jonathan: "Just use a regular xhr/fetch request for this. Don't use Inertia.js."

Haven't done it yet, though, posted here in case I forget.

1 like

MaximeLeRoux

Level 1

I also wanted to return back a 'status' message by doing return back()->with('status', 'data'), like it's being already done in other Laravel controllers (Fortify), but I couldn't get the result in my Vue app other than by re-rendering the view with Inertia::render() directly in the called route method.

In order to get this data you can either declare a shared key ('status') in the App\Http\Middleware\HandleInertiaRequests middleware, which will always be sent in each Inertia request. The 'data' is stored in the server-side user session:

    /**
     * Defines the props that are shared by default.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return array
     */
    public function share(Request $request)
    {
        return array_merge(parent::share($request), [
            'status' => session('status'),
        ]);
    }

Or, if you need to send specific data back only in one route, you should add a prop in the route method which generates the view (since back() will re-run the view rendering method), and also declare it in your Vue component (User/Show) by doing props: ['user', 'status']:

    /**
     * Handle the incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function __invoke(Request $request)
    {
        $user = $request->user(); // Some logic here

        return Inertia::render('User/Show', [
            'user' => $user,
            'status' => session('status') // Add this
        ]);
    }

Hope it helps!

1 like

Stingoosha

Level 1

Try to configure 'flash' in the App\Http\Middleware\HandleInertiaRequests middleware


    /**
     * Defines the props that are shared by default.
     *
     * @see https://inertiajs.com/shared-data
     * @param  \Illuminate\Http\Request  $request
     * @return array
     */
    public function share(Request $request)
    {
        return array_merge(parent::share($request), [
            'flash' => function () use ($request) {
                return [
                    'success' => $request->session()->get('success'),
                ];
            },
        ]);
    }

Now in controller use such construction


return redirect()->back()->with('success', 'some message');

And in view get this message


{{ $page.props.flash.success }}

Hope, You will succeed it!

11 likes

hayjay___

Level 1

@Stingoosha You are the best!

Mmaark

Level 2

You can pass the session as prop manually in the controller, since redirect is making the browser do an additional GET request to your route, you will have access to the session:

Route::get('/where-the-back()-pointing-to', function (Request $request) {
    return Inertia::render('YourPage', ['status' => $request->session()->get('status')]);
});

abdosaeedelhassan

Level 29

In your shared data, you need to get it as follow $page->props->varName by the way in console the varible shown null, i think this is bug, but the value passed successfully and you can access as above code statement

spectral_flux

Level 1

The best way I found was to do as such: In the controller

		   if ($result) {
            session()->flash('flash.type', 'success');
            session()->flash('flash.message', 'Dados atualizados!');
        } else {
            session()->flash('flash.type', 'error');
            session()->flash('flash.message', 'Erro ao atualizar!');
        }
        return Redirect::back();

And in my vue component:

...
 onSuccess: (data) => {
                    this.toast(this.$attrs.jetstream.flash.type, this.$attrs.jetstream.flash.message)
                },
....

mabdullahsari

Level 16

@spectral_flux Thanks for gravedigging yet another dead topic and sharing a subpar method.

Appreciated.

gigabites19

8 months ago

Level 1

very assholeish response

hamid_imomov

Level 1

Controller:

return redirect()->back()->withErrors(['db_error'=>'any message']);

Vue template:

<form @submit.prevent="submit">
...
<div v-if="form.errors.db_error">
{{ form.errors.db_error }}
</div>
</form>

Snapey

Level 122

@hamid_imomov please see the previous reply

blaubit

Level 1

I know I am reviving this again, but I wonder why the most simply solution is not present here. There is no global way, beside modifying the inertia handler, or without using the session controller.

Just define the session getter in the initial render, and you will then be able to read it:

return Inertia::render('Payment/Payment', [ 'payment_url' => session('payment_url'), ]);

And later: return back()->with('payment_url', $paymentUrl);

1 like

lushrombile