Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to pass Next.js backend data to the frontend?

I’m working with Next.js and ahave a very simple code where a frontend component is calling a backend endpoint. The backend retrieves the data correctly, but the frontend only receives an empty object every time.

The is the backend API endpoint that retrieves data from the DB.

File: src/app/api/clientOrders/route.ts:

import { 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);
}

This backend code works fine. I can see the retrieved records from the DB:

--> 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":"-"},{"id":2,"request_time":"2024-09-11T10:19:34.989Z","done_time":"2024-09-11T10:19:34.989Z","table_number":1,"order":"Arrived","status":false,"done_by":"-"},{"id":3,"request_time":"2024-09-11T10:20:45.861Z","done_time":"2024-09-11T10:20:45.861Z","table_number":1,"order":"Arrived","status":false,"done_by":"-"},{"id":4,"request_time":"2024-09-11T13:02:51.808Z","done_time":"2024-09-11T13:02:51.808Z","table_number":1,"order":"Arrived","status":false,"done_by":"-"},{"id":6,"request_time":"2024-09-11T13:04:55.126Z","done_time":"2024-09-11T13:04:55.126Z","table_number":1,"order":"Arrived","status":false,"done_by":"-"}]

Now the problem comes on the front-end.
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

The frontend component calls the backend API endpoint, but the data the it prints in the console.log() is always an empty object {}.

index.tsx:29 => ClientOrders retrieved from the backend = {}

Any idea what is going on? Why the frontend component doesn’t receive the data retrieved from the database?

Tags:

2

Answers


  1. 0

    Call it like this:

    const clientOrdersData = await (await fetch('http://localhost:3000/api/clientOrders')).json();
    Login or Signup to reply.
  2. 0

    You need to parse the response to json first

    async function getClientOrders() {
  const clientOrdersData = await fetch(
    'http://localhost:3000' + '/api/clientOrders',
    {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      },
    }
  );
  //add this line
  const clientOrdersDataJSON = await clientOrdersData.json();
  //
  console.log(
    '=> ClientOrders retrieved stringified = ' +
      JSON.stringify(clientOrdersDataJSON)
  );

  return clientOrdersDataJSON;
}

    Working sample: https://stackblitz.com/edit/stackblitz-starters-vwpwir?file=app%2Fpage.tsx

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search