I've encountered an issue while working with Next.js. In a simple code setup, the frontend component is making a call to the backend endpoint. The backend successfully retrieves the data from the database, but the frontend consistently receives an empty object.
Here's the backend API endpoint responsible for fetching data:
File:
src/app/api/clientOrders/route.tsimport { prisma } from "@/lib/prisma";
...
export async function GET(request: NextRequest) {
const clientOrders = await prisma.clientOrders.findMany();
console.log("--> clientOrders = " + JSON.stringify(clientOrders));
return NextResponse.json(clientOrders);
}
The backend logic seems to be functioning correctly as it successfully displays the retrieved DB records:
--> clientOrders = [{"id":1,"request_time":"2024-09-11T10:04:05.209Z","done_time":"2024-09-11T10:04:05.209Z","table_number":1,"order":"Arrived","status":false,"done_by":"-"}, ...]The problem arises on the front-end side now. File:
src/components/RestaurantActions/index.tsx"use client";
import { prisma } from "@/lib/prisma";
import Image from 'next/image';
const RestaurantActions = () => {
async function getClientOrders() {
const clientOrdersData = await fetch('http://localhost:3000' + '/api/clientOrders', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
});
console.log("=> ClientOrders retrieved stringified = " + JSON.stringify(clientOrdersData));
}
getClientOrders()
return(
// The component's HTML
)
}
export default RestaurantActions
Even though the frontend component triggers the backend API call, the data displayed in the console.log() always shows an empty object {}.
index.tsx:29 => ClientOrders retrieved from the backend = {}Any insights on why the frontend isn't receiving the data fetched from the database?