Inertia HandelInertiaRequests middleware

iam using HandelInertiaRequest share some data like

if(auth()->check()){
                $auth = [
                    'user'        => auth()->user(),
                    'roles'       => auth()->user()->roles->pluck('name'),
                    'permissions' => auth()->user()->roles[0]->permissions->pluck('name'),
                    'check'       => auth()->check()
                ];

Am using this in vue layout with UserProfileComponent.it's works properly.But when user update profile photo or name it's not auto updating.I have to reload the page.After reload the page it's working.

how can I fix this.Please help me

EveAT

1 year ago

Level 26

Since you're updating the profile within Vue, the data in Inertia's global shared state does not automatically update. As a solution you can use Inertia’s reload method to partial reload the page. Exemple:

import { Inertia } from '@inertiajs/inertia';

async function updateProfile() {
    try {
        await axios.post('/profile/update', formData); // Replace with actual API call
        Inertia.reload({ only: ['auth'] }); // Reload only the 'auth' shared prop
    } catch (error) {
        console.error('Error updating profile: ', error);
    }
}

naimul007a

1 year ago

Level 2

@EveAT It's reloading the whole page

am doing this

const submitForm = () => {
  userData.post(route('settings.store'), {
    forceFormData: true,
    preserveState: false,
    preserveScroll: true,
    onSuccess: () => {
      Inertia.reload({only: ['auth']});
    }
  })
}

Sinnbeck

1 year ago

Level 102

@naimul007a You shouldnt need to use Inertia.reload. Check the network tab of the browser and notice that it redirects you and adds the properties to the response. Check if the updated auth is there..

kleninmaxim

1 year ago

Level 50

You can use several ways to solve it.

Use polling: https://inertiajs.com/polling that will update data periodically
Try to use this.$inertia.reload({ only: ['auth'] }); and periodically call it
Use web sockets or pusher for real-time updates: https://laravel.com/docs/11.x/broadcasting

The 1 and 2 ways are simple

But it's recommended use websocket but it harder to realize

Sinnbeck

1 year ago

Level 102

That should work. Perhaps try setting preserveState to false and see if that makes a difference (if it is managed in state)

Please or to participate in this conversation.