Status code 500 when deleting an object using axios and Symfony but deletion works

Question

I'm using vue as my frontend. I want to delete an object from my database when a button is pressed, I post the selected object with axios but I get the following error:

wish.js:40 Error: Request failed with status code 500
    at createError (createError.js:16)
    at settle (settle.js:17)
    at XMLHttpRequest.handleLoad (xhr.js:61)

even though my object does get deleted from my database.

Here is my code:

 postWishToBeDeleted({commit}, wishId) {
    console.log(wishId);
    axios.post('/api/post/delete', {
        wishId: wishId
    }).catch(error => {
        console.error(error);
    }).then( response => {
        commit('removeWish', wishId);
        }
    )
}

Inside my symfony controller:

     /**
     * @Route("/api/post/delete", name="app_api_post_delete", methods={"POST"})
     */
    public function deleteWish(Request $request, WishRepository $repository) {

        $data = $request->getContent();
        $data = json_decode($data, true);
        $wish = $repository->find($data['wishId']);

        $em = $this->getDoctrine()->getManager();
        $em->remove($wish);
        $em->flush();

        return $this->json($wish);
    }

I think that something with my response is wrong, I'm still new to Vue and axios so I'm not sure how return the json object correctly

EDIT:

I noticed that this error only occurs if I have more than one object?? If I it's only one and I delete it, there's no error

Answer 1

Status 500 is a server error, and it sounds from the behavior that whatever causes the error must happen after the item is removed.

Looking at the deleteWish method, if $wish has been removed, maybe the problem is trying to convert it to JSON when it's undefined. Try to return something else like:

return true;