InertiaJS partial reload server-side ?

Hello,

Is it possible to generate a partial reload via routing ?

I explain what I'm trying to do.

On VueJS, I have a complex view with a description of the training, the list of the trainers, the list of the courses, ... so I have a training component, a trainers component, a courses component, ...

This view is displayed via the training.show route and it loads : the training, the trainers, the courses, ...

On this view, I have an edit button to edit the training, the modal form opens and when I update the training, I have 2 solutions :

the first one I already did is to use generate a partial reload in the JS code with Inertia.reload()
the second one I'd like to do is to redirect server side (like with blade) but reload only the training, a kind of Ineria.reload() but server side => is it possible ?

Why I ask this ? Because I have tested something with routing : when I redirect to the same VueJS view server side, the VueJS component isn't mounted once again (the console.log() in the onMount() method doesn't fire).

I think I have already the answer because the Inertia documentation show the partial reload only client side. So why the component isn't mounted again when I redirect to the same view ?

But I have noticed something else : when I update the training (modal window), without redirecting neither server side nor client side, without reloading anything, the training is updated anyway on the view. That's very strange.

I think that I need to understand deeply how InertiaJS works.

Can someone help me please ?

Thanks to your answer.

Vincent

gbaggaley

3 years ago

Level 1

I have exactly the same issue, did you ever find a fix?

gbaggaley

3 years ago

Level 1

I managed to find a way around it, not sure if it's the "correct" way but it works...

Using Vue 3 I've changed my code so I'm not receiving the lazy data as a prop and instead set it to a ref. Then once my partial reload has finished I assign the value to the ref.

const files = ref({});

onMounted(() => {
    router.reload({
        only: ['files'],
        onSuccess: (res) => {
            files.value = res.props.files;
            loading.value = false;
        },
    });
});

Now when the page "reloads" it will refresh the rest of the props but not the component data!

Please or to participate in this conversation.