0

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?

Denis
  • 120
  • 7
  • Does the Vue instance have the correct country in the data after redirecting back (checked with the browser Vue devtools), but it's not being reflected in the bound UI element? Or is the updated data not making it to the Vue instance at all? – Andrew Mar 03 '21 at 03:35
  • Also having the same problem – John Halsey Aug 11 '21 at 13:37
  • did u find any solution for this? – matheen ulla Nov 27 '21 at 06:33
  • The issues was that the data was not reaching the vue instance at all. After a refresh it woul dbe there, and sadly, we abandoned that project and used a different tech to solve the issue :/. I did not find a workaround for this problem – Denis Nov 29 '21 at 14:50

2 Answers2

0

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

Sagmed
  • 18
  • 4
0

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.

user19106040
  • 21
  • 3