I am using Laravel 8, VueJS and Axios to develop my application but every time I try to retrieve data from database When fetching all the records in it, it returns an error with status code 500. Even though there are no errors when using Postman/Insomnia to get the data.

I tried clearing the table from which the data was obtained, the error disappeared and empty data with status code 200 was returned.

Store module:

import axios from 'axios' export default { namespaced: true, state: { courses: [], teacher: '', }, getters: { allCourses(state) { return state.courses }, }, actions: { async fetchAllCourses({ commit }) { const response = await axios.get('teacher/course-management/list') console.log(response.data.data) commit('SET_COURSES', response.data.data) } }, mutations: { SET_COURSES(state, courses) { state.courses = courses } }

Controller:

public function fetchAllCourses() { try { $courses = Course::all()->sortBy('id'); $data = $courses->transform(function ($course) { // ! Get teacher ID $teacherId = $this->user->teacher->id; // ! Get the teacher's name based on ID $teacherName = $this->getTeacherName($teacherId); return [ 'id' => $course->id, 'teacher_id' => $course->teacher_id, 'teacher' => $teacherName, 'section' => $course->section, 'code' => $course->code, 'status' => $course->status, 'image' => $course->image, ]; }); return $this->success('Request successful', $data); } catch (\Exception $e) { return $this->error($e->getMessage(), $e->getCode()); } }