'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 |