next-learn
next-learn copied to clipboard
Docs: When I test under step seven "Fetching data for the dashboard overview page" I get the error "Error: Failed to fetch revenue data."
What is the documentation issue?
The error comes from the fetchRevenue() function located in the app/lib/data.ts file.
export async function fetchRevenue() {
try {
// Artificially delay a response for demo purposes.
// Don't do this in production :)
// console.log('Fetching revenue data...');
// await new Promise((resolve) => setTimeout(resolve, 3000));
const data = await sql<Revenue>`SELECT * FROM revenue`;
//console.log('Data fetch completed after 3 seconds.');
return data.rows;
} catch (error) {
console.error('Database Error:', error);
throw new Error('Failed to fetch revenue data.');
}
}
For the solution, I wanted to use the command we used in the database test before.
import { db } from "@vercel/postgres";
const client = await db.connect();
async function listInvoices() {
const data = await client.sql`
SELECT invoices.amount, customers.name
FROM invoices
JOIN customers ON invoices.customer_id = customers.id
WHERE invoices.amount = 666;
`;
return data.rows;
}
export async function GET() {
try {
return Response.json(await listInvoices());
} catch (error) {
return Response.json({ error }, { status: 500 });
}
}
And with my novice coding knowledge I wrote this and ran the graph but I didn't understand why the library(import { sql } from '@vercel/postgres'; ) wasn't working
import { db } from "@vercel/postgres";
const testr = await db.connect();
export async function fetchRevenue() {
try {
const data = await testr.sql<Revenue>`
SELECT * FROM revenue
`;
return data.rows;
} catch (error) {
console.error('database error', error);
throw new Error('revenue datasını çekemedi')
}
}
Is there any context that might help us understand?
I think I'm missing something
Does the docs page already exist? Please link to it.
https://nextjs.org/learn/dashboard-app/fetching-data
Same thing here
Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!
Fixed it. Used Supabase DB and that was the issue. Created a new Neon DB and everything works smoothly. There is an announcement here that Posgres is moving to Neon.
import { db } from "@vercel/postgres";
export async function fetchRevenue() {
try {
const testr = await db.connect(); // move this here to create a connection
const data = await testr.sql<Revenue>SELECT * FROM revenue;
testr.release(); //add this to release the connection
return data.rows;
} catch (error) {
console.error('database error', error);
throw new Error('revenue datasını çekemedi')
}
}
do this for every function and you will be good to go.
Fixed it. Used Supabase DB and that was the issue. Created a new Neon DB and everything works smoothly. There is an announcement here that Posgres is moving to Neon.
@123filip123 Other than installing Neon DB and grabing the variables to update env.local, what other changes did you make? I had a suspicion that the error I'm getting is due to the DB since there was no Postgres access, only Supabase and I did install Neon per your suggestion, but it's missing other variables too, getting error with Neon:
VercelPostgresError: VercelPostgresError - 'missing_connection_string': You did not supply a 'connectionString' and no 'POSTGRES_URL' env var was found.
EDIT When copying Variables from Neon, make sure to use 'Copy Snippet' action. It looked to me that the variables were short (only 3), but there are a lot of other important stuff below. Copy all variables, save it in your .env.local (I commented out the Supabase, but you can delete them). After that the Chart and the Invoices showed up. Thank you!!!
Düzeltildi. Supabase DB kullanıldı ve sorun buydu. Yeni bir Neon DB oluşturuldu ve her şey sorunsuz çalışıyor. Posgres'in Neon'a taşındığına dair burada bir duyuru var.
Yes, that's true, since I opened the db in supabase, there were constant disconnections, I should have read it more carefully.
Fixed it. Used Supabase DB and that was the issue. Created a new Neon DB and everything works smoothly. There is an announcement here that Posgres is moving to Neon.
I was having so many problems with none of my queries working and changing "sqlquery" to "sql.query(query)" stopped working for me on Chapter 12.
Changing to neon db worked for me as well. I only changed the .env contents with the new snippets then did seeding again.
@VitaliJud did you have to visit localhost:3000/seed ?
I'm not getting any fetch errors but I'm seeing zero data in my chart
edit: lmao gosh darn it - if only I read literally the very next line. My component was still commented
import { db } from "@vercel/postgres";
export async function fetchRevenue() { try { const testr = await db.connect(); // move this here to create a connection const data = await testr.sql
SELECT * FROM revenue; testr.release(); //add this to release the connection return data.rows; } catch (error) { console.error('database error', error); throw new Error('revenue datasını çekemedi') } }do this for every function and you will be good to go.
Thank you for this! I was using Supabase, and this fixed it.
import { db } from "@vercel/postgres";
export async function fetchRevenue() { try { const testr = await db.connect(); // move this here to create a connection const data = await testr.sql
SELECT * FROM revenue; testr.release(); //add this to release the connection return data.rows; } catch (error) { console.error('database error', error); throw new Error('revenue datasını çekemedi') } }do this for every function and you will be good to go.
I'm also following the tutorial and chose Supabase and had the same issue. This fix worked for me too - many thanks!