Next.js Discord

Discord Forum

API connection problem.

Unanswered
New Guinea Singing Dog posted this in #help-forum
Open in Discord
New Guinea Singing DogOP
Hey guys!!
Am having problem to load my data to the frontend through api..
Am using Postgres and prisma ORM, everything is fine in backend.
There is no error is overall code, but anyhow the page is not getting populated with data..

Ig problem is not that big.. but its my first on next js.. so I need #help..
Tried a lot through chat gpt nd stack overflow but its not working out.
Can anyone pls helppppppppp😭😭?
#help

12 Replies

New Guinea Singing DogOP
api.ts
CardPopularProducts.tsx
page.tsx
New Guinea Singing DogOP
The problem is dashboardMetrics in the CardPopularProduct.tsx is undefined.

But from backend server the api is working fine when tested in postman.

api.ts is in client folder and it is supposed to export the dashboardMetrics, but its not happening ig.

And there is no error displayed either in browser or in IDE.
Sun bear
I would fetch the data in page.tsx and pass them as props to CardPopulateProducts

If you want to go with your current setup i would double check if CardPopulateProducts has "use client" declaration on top.

And then do further investigation on the useGetDash... Hook.

It needs to run a serveraction or fetch the api in a correct way.

But in your case i would fetch serverside in page.tsx
New Guinea Singing DogOP
use client declaration is there on top in cardpopular
Nd i did check the useGetDashboardQuery hook too. No problem, with that
But I am unable to understand the serverification stuff.
New Guinea Singing DogOP
//CardPopularProduct.tsx 
"use client";
import { useGetDashboardMetricsQuery } from "@/src/state/api";
import { ShoppingBag } from "lucide-react";
import React from "react";
import Rating from "../(components)/Rating";
import Image from "next/image";

const CardPopularProducts = () => {
  const { data: dashboardMetrics, isLoading } = useGetDashboardMetricsQuery();
  console.log(dashboardMetrics);

  return (
       <div>the card goes in here</div>
)
   
};

export default CardPopularProducts;


//page.tsx
const Dashboard = () => {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 xl:overflow-auto gap-10 pb-4 custom-grid-rows">
      <CardPopularProducts/>
      
    </div>
  );
};

//api.ts
export interface DashboardMetrics {
  popularProducts: Product[];
  salesSummary: SalesSummary[];
  purchaseSummary: PurchaseSummary[];
  expenseSummary: ExpenseSummary[];
  expenseByCategorySummary: ExpenseByCategorySummary[];
}

export const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: process.env.NEXT_PUBLIC_API_BASE_URL }),
  reducerPath: "api",
  tagTypes: ["DashboardMetrics"],
  endpoints: (build) => ({
    getDashboardMetrics: build.query<DashboardMetrics, void>({
      query: () => "/dashboard",
      providesTags: ["DashboardMetrics"],
    }),
    
  }),
});
export const {useGetDashboardMetricsQuery} = api;
What changes to be done?
Sun bear
I would do it like this:


/page.tsx

export default async function Page() {

const products = await prisma.products.findMany() // or different query

return (
<CardPopularProducts products={products} />
)

}


/CardPopularProducts.tsx
export default function CardPopularProducts({products}:{products: any[]}) {

return (
// Do something with the products
)

}