Getting data with axios after inertia form put action

I have a model event that alters the status of a record depending on how another field is filled in, in pseudo code it's like this:

if($model->cancelled = true) {
			$model->status = 'cancelled';
}

That's a very simplified overview as there are a combination of fields in the model that can output different statuses.

What I'm having trouble with is when the form is submitted the status field isn't updated. I know that's by design as inertia doesn't re-render the form after update.

I know that I can force a full reload but then I lose flash messages and it's a bit clunky. is there a way I can make a get request to repopulate the data in the form? I have looked at native fetch and axios, but as i need to be authenticated I don't seem to be able to make these work.

The bootstrap.js file isn't there anymore for me to have axios set up, and when I come to make a request after installing it manually, it hits the web.php routes not the api.php routes.

What am I doing wrong? Thanks!

LaryAI

3 years ago

Level 58

To update the status field after submitting the form, you can use the Inertia.reload() method to reload the current page. This will fetch the updated data from the server and re-render the page with the new data.

Here's an example of how you can use Inertia.reload() after submitting the form:

// Import the Inertia object
import { Inertia } from '@inertiajs/inertia';

// Submit the form using Inertia
Inertia.put('/events/' + eventId, formData).then(() => {
    // Reload the current page to fetch the updated data
    Inertia.reload();
});

This code assumes that you're using Inertia to submit the form and that you have access to the eventId and formData variables.

If you're having trouble with authentication when making a GET request to fetch the updated data, you can include the authentication token in the request headers. Here's an example of how you can do this using Axios:

// Import the Axios library
import axios from 'axios';

// Make a GET request to fetch the updated data
axios.get('/events/' + eventId, {
    headers: {
        'Authorization': 'Bearer ' + authToken
    }
}).then(response => {
    // Update the form data with the fetched data
    formData = response.data;
});

This code assumes that you have access to the eventId and authToken variables and that the server returns the updated data in the response body.

gomako

3 years ago

Best Answer

Level 3

Actually I have solved this myself. I should have checked what is returned on a successful post/put. I solved my issue (not the cleanest way I think), like this in case anyone else comes across this issue:

this.form.put(`/appointments/${this.appointment.id}`, {
	onSuccess: (response) => {
		this.form.status = response.props.appointment.status;
	}
});

If anyone has a better solution please let me know.

Please or to participate in this conversation.