'Laravel Inertia Shared Data not updating

I have a laravel breeze app up and running using InertiaJS scaffolding. I'm using a middleware to pass general data to the layout.

The issue is the following :

A user can change the country, and if the country has changed, you have a different list of stores available. Not all stores are present at all times in the layout, if you change the country, a subset of all the stores will be given to you that are available to the specific country.

When the user changes the country from the dropdown, I make a $inertia.post request, and if the user is authenticated, I send the data to our CORE API to update the users preferences.

After this is all set and done, I return a \Redirect::back() so the user goes back where he changed the country.

Here if I check the middleware, the stores are indeed the right ones, but the frontend does not get the new data, but if I refresh after changing the country, the correct stores show up.

 //INERTIA VUE
 countryChange() {
   this.$inertia.post(this.route('switch_country'), {new_country_id: this.selected_country.id}, {})
 }

Controller Action

 public function switchCountry(Request $request)
{
    $country_id = $request->get('new_country_id');

    if (SessionHandler::isAuth()) {
        $auth_token = SessionHandler::auth_token();
        $this->wrapper->changeCountry($country_id, $auth_token);
        $new_user_data = $this->wrapper->getUserInfo($auth_token);
        SessionHandler::sessionAuth($auth_token, $new_user_data['data']);
    }

    SessionHandler::updateCountry($country_id);
    return Redirect::back();
}

Middleware

 /**
 * Define the props that are shared by default.
 *
 * @param \Illuminate\Http\Request $request
 * @return array
 */
public function share(Request $request)
{
    $cachingService = resolve(CachingService::class);
    $country_id = SessionHandler::getCurrentCountry();

    $stores = $cachingService->stores->getStoresInCountry($country_id);

    return array_merge(parent::share($request), [
        'auth' => [
            'user' => session()->has('user') ? session('user') : null,
        ],
        'selected_country' => $cachingService->countries->getCountryById($country_id),
        'store_categories' => $cachingService->store_categories->retrieveByCountryId($country_id),
        'stores' => $stores,
        'countries' => array_values(collect($cachingService->countries->get())->sortBy('name')->toArray()),
    ]);
}

TLDR: why does Inertia not update all my props that is supposed to be passing to all requests when they change and it requires a refresh to properly display the data?



Solution 1:[1]

I thought I had the same problem because the data did not update in vue devtools, but I have checked it with the good old console.log() method and it shows, that the data is updated

Solution 2:[2]

I had this issue when I incorrectly used "=" in a v-if conditional. Once I corrected it to "===" the issue was solved. I don't understand why, but I think it has something to do with how it compiles in app.js.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sagmed
Solution 2 user19106040