[Inertia 2.0] Allow pushing external axios abort controller signals to the router OR implement an AJAX client.

[danmatthews]

Sometimes using Inertia's router for loading, even lazy loading, is still not the answer. I'm not sure what you folks have cooking for 2.0 but I would love the ability to pass a cancel token/abort signal to the router, so if a page visit is initialised, it would cancel that request, too. We currently do this with a store in Svelte, but would be amazing if it was built in.

Scenario:

I have an overview dashboard with 5 graphs, each graph loads data using axios.get as using lazy loading would have to wait for all 5 to finish loading before returning the result from the server.

If i click a <Link> to navigate to another page, it does not cancel my non-inertia-router axios requests.

How we do it at the moment

At the moment, we use a svelte store and push the abortcontroller to it:

// In our component
const GetData = () => {
   const requestController = new AbortController();
   axios.get('/my-graph-url-one', {
      signal: controller.signal
   }).then(function(response) {
      // Display the result
   });

   $abortOnChange[] = requestController;
}

// In app.js
router.on('navigate', function() {
   $abortOnChange?.length && $abortOnChange?.length > 0 && $abortOnChange.forEach(signal => signal.cancel());
});

This allows any component to push to the store, then the navigate event to cancel it, it has a few drawbacks, but it works for the most part.

What I would love to see

Option 1 - Router accepts AbortController() instances or cancel tokens from axios

Imagine my code above, but being able to do something like:

router.cancelOnNavigate(
  axios.get('my-url')
)
.then(r => myData = r.data)
.catch(e => console.error(e))

Where cancelOnNavigate adds information to the axios instance, but then proxies the Promise back through.

Option 2 - router.axios becomes a thin proxy

You could make router.axios a thin proxy that automatically adds cancel tokens to the router for visits.

// Will automatically cancel on navigate.
router.axios.get('my-url');

Option 3: Give v2.0 it's own http client as a proxy over axios, with extra fun goodies!

So - full disclosure, this is something we use in our app that we use to automatically get the errors from Laravel so we don't have to manually do it each time. I like this approach, and i think something like this would make a valuable addition to Inertia.

Note: window.notyf.error(message); calls are specific to our implementation and i'm aware how bad it is to be using the window object 😆 before anyone says anything.

const createHttpClient = (automaticallyShowErrors = true) => {

    let client = axios.create();

    client.prototype.onlyShowSingleError = false;

    client.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";

    client.interceptors.response.use(function (response) {

        if (response.status === 422) {
            // Show errors?
        }

        console.log("SUCCESSFUL");

        return response;

    }, function (error) {

        if (error.response.status == 422) {
            console.log(error.response.data);
            console.log('is validation error');
            // Laravel validation error / response.
            let errors = error.response.data.errors;

            if (automaticallyShowErrors) {
                for (let key in errors) {
                    let message = errors[key][0];
                    window.notyf.error(message);
                }

                if (!errors && error.response.data?.message) {
                    window.notyf.error(error.response.data.message);
                }
            }

            return Promise.reject({error: error, isValidationError: true, errors: errors});

        } else {
            let errors = error.response.data.errors;

            // "Normal" error.
            // console.log(errors);
            if (automaticallyShowErrors) {
                for (let key in errors) {
                    let message = errors[key][0];
                    window.notyf.error(message);
                }

                if (!errors && error.response.data?.message) {
                    window.notyf.error(error.response.data.message);
                }
            }
            return Promise.reject({isValidationError: false, error: error, errors: errors || []});

        }


    });

    return client;

}

[danmatthews]

Closing this because Inertia 2.0 has, or at least will hopefully fix all of these problems in a more elegant way than I could have proposed.

Big thanks @reinink and Joe! ❤️

[javieralarcn10]

Hi Dan, I have tried what you mention but it doesn't quite work. In frontened it works perfectly and the axios request is cancelled, but the backend (laravel) does not hear this disconnection/cancellation by the client and continues to process the request. Have you found a solution here? Thank you very much in advance!