Skip to content

Docs: When I test under step seven "Fetching data for the dashboard overview page" I get the error "Error: Failed to fetch revenue data." #947

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
fatih-keon opened this issue Dec 5, 2024 · 9 comments
Labels
documentation Improvements or additions to documentation

Comments

@fatih-keon
Copy link

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

@fatih-keon fatih-keon added the documentation Improvements or additions to documentation label Dec 5, 2024
@123filip123

This comment has been minimized.

@123filip123
Copy link

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.

@samcx samcx transferred this issue from vercel/next.js Dec 6, 2024
@EverDegen
Copy link

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.sqlSELECT * 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.

@VitaliJud
Copy link

VitaliJud commented Dec 9, 2024

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!!!

@fatih-keon
Copy link
Author

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.

@realfr
Copy link

realfr commented Dec 10, 2024

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.

@smokinjoe
Copy link

smokinjoe commented Dec 13, 2024

@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

@aidanpatrickkane
Copy link

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.sqlSELECT * 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.

@stuartabrown
Copy link

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.sqlSELECT * 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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Improvements or additions to documentation
Projects
None yet
Development

No branches or pull requests

8 participants