Refresh the baseRoute page data

[danhanly]

My modal sits atop a page that shows some data (the base route page).

The modal window will add a new item to that data.  

When I submit the form in the modal window and the response redirects back to the base route page, the data remains unchanged.

I think this is intended functionality within Inertia, but perhaps appears as a quirk when using Momentum Modal since the base route page is loaded already in the background.

Is there a way I could trigger a reload of relevant data? Perhaps via an event or something?

[danhanly]

My issue was related to the fact that some data transformation happens in the base route page's onMounted lifecycle hook method. This method isn't called or executed at all when the modal window closes (or when a redirect happens back to this page), since Inertia has already loaded and mounted the page, so doens't need to do it again - great for performance, but not so much when you want to force some of that page to update.

The props of the base route page were correct (and updated correctly), but the data transformation wasn't occurring due to the missing execution of the onMounted method. Unfortunately I had no other solution than to do the data transformation in the controller action before sending it, because I couldn't find a reliable lifecycle event within my vue component with which to hook into.

As I mentioned in my original post; Momentum Modal is working correctly, and so is InertiaJS, there's evidently just a few quirks when they're working together at the same time.

I'll leave this open just incase the maintainers have an idea at how to solve this.

[ragulka]

@danhanly couldn't you achieve a similar result by moving the data transformation into a watcher?

Ie, something like:

const page = usePage()
const customer = ref(null)

watch(
    () => page.props.customer,
    customerFromProps => {
       // transform data here, an example is below
        customer.value = customerFromProps
        customer.value.fullName = customer.value.first_name + ' ' + customer.value.last_name
    } ,
    { immediate: true }
)