Next.js tutorial database error
Unanswered
Yellow-horned horntail posted this in #help-forum
Yellow-horned horntailOP
https://nextjs.org/learn/dashboard-app/fetching-data
// I add the import …
import { fetchRevenue } from ‘@/app/lib/data’;
// No problem
// Add the await fetchRevenue
const revenue = await fetchRevenue();
// Error
26 | console.error(‘Database Error:’, error);
27 | throw new Error(‘Failed to fetch revenue data.’);
// Database has all tables and sample data. RLS is disabled.
// Googled and found similar errors but not this one. :=(
// Thanks for you time and interest.
// I add the import …
import { fetchRevenue } from ‘@/app/lib/data’;
// No problem
// Add the await fetchRevenue
const revenue = await fetchRevenue();
// Error
26 | console.error(‘Database Error:’, error);
27 | throw new Error(‘Failed to fetch revenue data.’);
// Database has all tables and sample data. RLS is disabled.
// Googled and found similar errors but not this one. :=(
// Thanks for you time and interest.
8 Replies
Yellow-horned horntailOP
`
import { Card } from '@/app/ui/dashboard/cards';
import RevenueChart from '@/app/ui/dashboard/revenue-chart';
import LatestInvoices from '@/app/ui/dashboard/latest-invoices';
import { lusitana } from '@/app/ui/fonts';
import { fetchRevenue } from '@/app/lib/data';
export default async function Page() {
// const revenue = await fetchRevenue();
return (
<main>
<h1 className={
Dashboard Home
</h1>
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
{/* <Card title="Collected" value={totalPaidInvoices} type="collected" /> /}
{/ <Card title="Pending" value={totalPendingInvoices} type="pending" /> /}
{/ <Card title="Total Invoices" value={numberOfInvoices} type="invoices" /> /}
{/ <Card
title="Total Customers"
value={numberOfCustomers}
type="customers"
/> /}
</div>
<div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-8">
{/ <RevenueChart revenue={revenue} /> /}
{/ <LatestInvoices latestInvoices={latestInvoices} /> */}
</div>
</main>
);
}`
import RevenueChart from '@/app/ui/dashboard/revenue-chart';
import LatestInvoices from '@/app/ui/dashboard/latest-invoices';
import { lusitana } from '@/app/ui/fonts';
import { fetchRevenue } from '@/app/lib/data';
export default async function Page() {
// const revenue = await fetchRevenue();
return (
<main>
<h1 className={
${lusitana.className} mb-4 text-xl md:text-2xl}>Dashboard Home
</h1>
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
{/* <Card title="Collected" value={totalPaidInvoices} type="collected" /> /}
{/ <Card title="Pending" value={totalPendingInvoices} type="pending" /> /}
{/ <Card title="Total Invoices" value={numberOfInvoices} type="invoices" /> /}
{/ <Card
title="Total Customers"
value={numberOfCustomers}
type="customers"
/> /}
</div>
<div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-8">
{/ <RevenueChart revenue={revenue} /> /}
{/ <LatestInvoices latestInvoices={latestInvoices} /> */}
</div>
</main>
);
}`
This is the code from the tutorial.
When I uncomment // const revenue = await fetchRevenue();
I receive the ‘Failed to fetch revenue data.’
I receive the ‘Failed to fetch revenue data.’
database tables have RLS disabled and are easy to query in Supabase
Yellow-horned horntailOP
Tables are easy to query with Supabase next template also
What's up with NextJS tutorial?
Oak apple gall wasp
Hello, I have the same issue, have you resolved it ?