Refresh data after update

After submitting a form with form.put(route('user.data.profile.update')), I want the updated data to be displayed in my frontend. For example, if I change the username in a form, after the update and a success message, I would like to have the updated user object in my frontend so that I can reflect the updated username.

How do you handle this in Inertia.js/Vue/Laravel?

Here’s my Vue route:

form.put(route('user.data.profile.update'), {
                  preserveState: true,
                  data: formData,
                  onSuccess: (response) => {
                     overlayStore.hide();
                  },
                  onError: (errors) => {
                     Object.keys(errors).forEach((key) => {
                        fieldErrors[key] = errors[key];
                     });
                     overlayStore.hide();
                  }
               });

And my Laravel Controller:

public function updateUserDataProfile(Request $request)
    {
        $user = User::where('id', Auth::id())->first();
        $user->update($request->only(['name', 'birthday', 'language']));

        return to_route('user.data.profile.get')
            ->with([
                'status' => 'success',
                'message' => 'Profil erfolgreich aktualisiert',
                'updated_at' => $user->updated_at,
            ]);
    }

LaryAI

1 year ago

Level 58

To ensure that the updated data is reflected in your frontend after a form submission using Inertia.js with Vue and Laravel, you need to make sure that the updated user data is returned to the frontend after the update operation. Here's how you can achieve this:

Laravel Controller

In your Laravel controller, after updating the user data, you should return the updated user object. Instead of redirecting with to_route, you can return the updated user data directly. This allows Inertia to receive the updated data and update the frontend accordingly.

Here's how you can modify your updateUserDataProfile method:

public function updateUserDataProfile(Request $request)
{
    $user = User::where('id', Auth::id())->first();
    $user->update($request->only(['name', 'birthday', 'language']));

    // Return the updated user data
    return response()->json([
        'status' => 'success',
        'message' => 'Profil erfolgreich aktualisiert',
        'user' => $user,
    ]);
}

Vue Component

In your Vue component, you can handle the response in the onSuccess callback to update the frontend state with the new user data. Here's how you can modify your Vue code:

form.put(route('user.data.profile.update'), {
    preserveState: true,
    data: formData,
    onSuccess: (response) => {
        // Assuming you have a user state in your component or store
        this.user = response.props.user; // Update the user data in your frontend
        overlayStore.hide();
    },
    onError: (errors) => {
        Object.keys(errors).forEach((key) => {
            fieldErrors[key] = errors[key];
        });
        overlayStore.hide();
    }
});

Explanation

Laravel Controller: After updating the user, return the updated user data as a JSON response. This allows the frontend to receive the updated data directly.
Vue Component: In the onSuccess callback, update the frontend state with the new user data received from the server. This ensures that any changes made to the user data are immediately reflected in the UI.

By following these steps, you ensure that the updated user data is available in your frontend immediately after the form submission, providing a seamless user experience.