next-learn icon indicating copy to clipboard operation
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."

Open fatih-keon opened this issue 1 year ago • 9 comments

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 avatar Dec 05 '24 16:12 fatih-keon

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!

123filip123 avatar Dec 06 '24 18:12 123filip123

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 avatar Dec 06 '24 18:12 123filip123

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.

EverDegen avatar Dec 07 '24 13:12 EverDegen

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

VitaliJud avatar Dec 09 '24 17:12 VitaliJud

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.

fatih-keon avatar Dec 09 '24 18:12 fatih-keon

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.

realfr avatar Dec 10 '24 23:12 realfr

@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

smokinjoe avatar Dec 13 '24 15:12 smokinjoe

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.

aidanpatrickkane avatar Dec 30 '24 20:12 aidanpatrickkane

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!

stuartabrown avatar Jan 02 '25 14:01 stuartabrown