Inertia Axios Detroy

I have done this before on an old project, and it worked find. But this project I keep running into trouble and I think it may have something to do with the update.

Now I have realised on this one I am using Inertia useform to delete. But I didn't some messing around, and I was trying to just see if I can get the back end function to run, so I changed to post to store, which I know works and I ran into the same problem. Error below.

Help.

Object { stack: "AxiosError@http://127.0.0.1:5173/node_modules/.vite/deps/chunk-SFZB7FUK.js?v=d34b111c:367:18\nsettle@http://127.0.0.1:5173/node_modules/.vite/deps/chunk-SFZB7FUK.js?v=d34b111c:1184:12\nonloadend@http://127.0.0.1:5173/node_modules/.vite/deps/chunk-SFZB7FUK.js?v=d34b111c:1408:13\nEventHandlerNonNull*dispatchXhrRequest@http://127.0.0.1:5173/node_modules/.vite/deps/chunk-SFZB7FUK.js?v=d34b111c:1418:7\nxhr_default<@http://127.0.0.1:5173/node_modules/.vite/deps/chunk-SFZB7FUK.js?v=d34b111c:1367:10\ndispatchRequest@http://127.0.0.1:5173/node_modules/.vite/deps/chunk-SFZB7FUK.js?v=d34b111c:1567:10\nrequest@http://127.0.0.1:5173/node_modules/.vite/deps/chunk-SFZB7FUK.js?v=d34b111c:1826:33\nhttpMethod@http://127.0.0.1:5173/node_modules/.vite/deps/chunk-SFZB7FUK.js?v=d34b111c:1855:19\nwrap@http://127.0.0.1:5173/node_modules/.vite/deps/chunk-SFZB7FUK.js?v=d34b111c:4:15\ndestroy@http://127.0.0.1:5173/resources/js/Components/Admin/User/ShowUser.jsx?t=1678799047555:26:11\nonClick@http://127.0.0.1:5173/resources/js/Components/Admin/User/ShowUser.jsx?t=1678799047555:144:65\ncallCallback2@http://127.0.0.1:5173/node_modules/.vite/deps/chunk-CIQVVTPY.js?v=d34b111c:3674:22\ninvokeGuardedCallbackDev@http://127.0.0.1:5173/node_modules/.vite/deps/chunk-CIQVVTPY.js?v=d34b111c:3699:24\ninvokeGuardedCallback@http://127.0.0.1:5173/node_modules/.vite/deps/chunk-CIQVVTPY.js?v=d34b111c:3733:39\ninvokeGuardedCallbackAndCatchFirstError@http://127.0.0.1:5173/node_modules/.vite/deps/chunk-CIQVVTPY.js?v=d34b111c:3736:33\nexecuteDispatch@http://127.0.0.1:5173/node_modules/.vite/deps/chunk-CIQVVTPY.js?v=d34b111c:7016:50\nprocessDispatchQueueItemsInOrder@http://127.0.0.1:5173/node_modules/.vite/deps/chunk-CIQVVTPY.js?v=d34b111c:7036:30\nprocessDispatchQueue@http://127.0.0.1:5173/node_modules/.vite/deps/chunk-CIQVVTPY.js?v=d34b111c:7045:45\ndispatchEventsForPlugins@http://127.0.0.1:5173/node_modules/.vite/deps/chunk-CIQVVTPY.js?v=d34b111c:7053:31\nnode_modules/react-dom/cjs/react-dom.development.js/dispatchEventForPluginEventSystem/<@http://127.0.0.1:5173/node_modules/.vite/deps/chunk-CIQVVTPY.js?v=d34b111c:7177:20\nbatchedUpdates@http://127.0.0.1:5173/node_modules/.vite/deps/chunk-CIQVVTPY.js?v=d34b111c:18909:20\nbatchedUpdates@http://127.0.0.1:5173/node_modules/.vite/deps/chunk-CIQVVTPY.js?v=d34b111c:3579:20\ndispatchEventForPluginEventSystem@http://127.0.0.1:5173/node_modules/.vite/deps/chunk-CIQVVTPY.js?v=d34b111c:7176:25\ndispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay@http://127.0.0.1:5173/node_modules/.vite/deps/chunk-CIQVVTPY.js?v=d34b111c:5478:46\ndispatchEvent@http://127.0.0.1:5173/node_modules/.vite/deps/chunk-CIQVVTPY.js?v=d34b111c:5472:92\ndispatchDiscreteEvent@http://127.0.0.1:5173/node_modules/.vite/deps/chunk-CIQVVTPY.js?v=d34b111c:5449:26\nEventListener.handleEvent*addEventBubbleListener@http://127.0.0.1:5173/node_modules/.vite/deps/chunk-CIQVVTPY.js?v=d34b111c:5635:18\naddTrappedEventListener@http://127.0.0.1:5173/node_modules/.vite/deps/chunk-CIQVVTPY.js?v=d34b111c:7122:37\nlistenToNativeEvent@http://127.0.0.1:5173/node_modules/.vite/deps/chunk-CIQVVTPY.js?v=d34b111c:7079:34\nnode_modules/react-dom/cjs/react-dom.development.js/listenToAllSupportedEvents/<@http://127.0.0.1:5173/node_modules/.vite/deps/chunk-CIQVVTPY.js?v=d34b111c:7088:38\nlistenToAllSupportedEvents@http://127.0.0.1:5173/node_modules/.vite/deps/chunk-CIQVVTPY.js?v=d34b111c:7085:29\ncreateRoot@http://127.0.0.1:5173/node_modules/.vite/deps/chunk-CIQVVTPY.js?v=d34b111c:21172:37\ncreateRoot@http://127.0.0.1:5173/node_modules/.vite/deps/chunk-CIQVVTPY.js?v=d34b111c:21507:18\nnode_modules/react-dom/client.js/exports.createRoot@http://127.0.0.1:5173/node_modules/.vite/deps/react-dom_client.js?v=d34b111c:21:20\nsetup@http://127.0.0.1:5173/resources/js/app.jsx:16:28\nU/i<@http://127.0.0.1:5173/node_modules/.vite/deps/@inertiajs_react.js?v=d34b111c:3425:225\npromise callback*U@http://127.0.0.1:5173/node_modules/.vite/deps/@inertiajs_react.js?v=d34b111c:3425:212\n@http://127.0.0.1:5173/resources/js/app.jsx:8:17\n", message: "Request failed with status code 500", name: "AxiosError", code: "ERR_BAD_RESPONSE", config: {…}, request: XMLHttpRequest, response: {…} }
ShowUser.jsx:18:24

New project version: Laravel Framework 10.2.0 Old project version: Laravel Framework 9.47.0

Old Version of how I did what I need to do:

POST            item/delete 		item.delete › ItemController@delete

    public function delete(Request $request)
    {
        $item = Item::where('cart_id', '=', $request->cart_id)->where('product_id', '=', $request->product_id)->first();
        $item->delete();
    }

    const { data, setData, post, processing, errors, reset } = useForm({
        cart_id: '',
        product_id: '',
    });

    function handleRemove(product_id) {
        let find = items.find(object => object.product_id === product_id);
        data.cart_id = find.cart_id;
        data.product_id = find.product_id;
        setData(data);

        axios.post('/item/delete', data)
            .then(function (response) {
                console.log(response);
            })
            .catch(function (error) {
                console.log(error);
            });

        let index = items.findIndex((obj) => obj.id === find.id)
        let arr = [...items];
        arr.splice(index, 1);
        setItems(arr);
    }

<div className="basis-1/12 bg-red-600 hover:bg-red-700 rounded-r text-center  p-3 font-bold float-right cursor-pointer" onClick={() => handleRemove(product.id)}>
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-x-lg mx-auto align-middle" viewBox="0 0 16 16">
                                                    <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z" />
                                                </svg>
                                            </div>

New version of what I need to do:

POST      admin/user/destroy 		 admin.user.destroy › UserController@destroy

    public function destroy(Request $request)
    {
        $user = User::find($request->id);
        $user->delete();
    }

<div onClick={() => destroy(user.id)} className="text-red-600 dark:text-red-500 hover:underline transition cursor-default flex-1">delete</div>

    const destroy = (id) => {
        let filteredArray = users.filter(item => item.id !== id);
        setUsers(filteredArray);

        axios.post('/admin/user/destroy', id)
            .then(function (response) {
                console.log(response);
            })
            .catch(function (error) {
                console.log(error);
            });
    }

LaryAI

3 years ago

Level 58

The error message suggests that there is an issue with the Axios request. Specifically, it seems that the server is returning a 500 error code, which indicates that there is a problem with the server-side code.

One possible issue is that the server is expecting the data to be sent in a specific format, but the client is sending it in a different format. In the old project, the data was sent as form data, but in the new project, it is being sent as JSON data.

To fix this, you can update the server-side code to accept JSON data. In the Laravel controller, you can use the json() method to parse the JSON data:

public function destroy(Request $request)
{
    $data = json_decode($request->getContent(), true);
    $user = User::find($data['id']);
    $user->delete();
}

In the client-side code, you can update the axios.post() call to send the data as JSON:

axios.post('/admin/user/destroy', { id })
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });

Note that the data is now being sent as an object with a single property id, which is the value of the id parameter. This object is automatically converted to JSON by Axios.

Also, make sure that the server-side code is returning a response with a 200 status code if the delete operation is successful. If there is an error, you can return a response with a 500 status code and an error message.

1 like

Randy_Johnson

3 years ago

Best Answer

Level 8

Okay, I have no idea how, because I have been scratching my head at this for hours. But as soon as I posted this, I got it working.

Please or to participate in this conversation.