vercel / next-learn

Learn Next.js Starter Code
https://next-learn-dashboard.vercel.sh/
MIT License
3.82k stars 1.94k forks source link

Chapter 6: Cannot seed DataBase #792

Open Gentle-Cannibal opened 4 months ago

Gentle-Cannibal commented 4 months ago

Good day everyone. 👋 When I try to seed DB I get the next error.

Error: [object Object] at getProperError (XXXXXXXXXXXXXXXXXX\Education\nextjs-dashboard\node_modules.pnpm\next@15.0.0-rc.0_react-dom@19.0.0-rc-f994737d14-20240522_react@19.0.0-rc-f994737d14-20240522ru4vnckpyyafgw46z2uaeehbny\node_modules\next\dist\lib\is-error.js:41:12) at DevServer.renderToResponseImpl (XXXXXXXXXXXXXXXXXX\Education\nextjs-dashboard\node_modules.pnpm\next@15.0.0-rc.0_react-dom@19.0.0-rc-f994737d14-20240522_react@19.0.0-rc-f994737d14-20240522ru4vnckpyyafgw46z2uaeehbny\node_modules\next\dist\server\base-server.js:2038:53) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async DevServer.pipeImpl (XXXXXXXXXXXXXXXXXX\Education\nextjs-dashboard\node_modules.pnpm\next@15.0.0-rc.0_react-dom@19.0.0-rc-f994737d14-20240522_react@19.0.0-rc-f994737d14-20240522ru4vnckpyyafgw46z2uaeehbny\node_modules\next\dist\server\base-server.js:908:25) at async NextNodeServer.handleCatchallRenderRequest (XXXXXXXXXXXXXXXXXX\Education\nextjs-dashboard\node_modules.pnpm\next@15.0.0-rc.0_react-dom@19.0.0-rc-f994737d14-20240522_react@19.0.0-rc-f994737d14-20240522ru4vnckpyyafgw46z2uaeehbny\node_modules\next\dist\server\next-server.js:273:17) at async DevServer.handleRequestImpl (XXXXXXXXXXXXXXXXXX\Education\nextjs-dashboard\node_modules.pnpm\next@15.0.0-rc.0_react-dom@19.0.0-rc-f994737d14-20240522_react@19.0.0-rc-f994737d14-20240522ru4vnckpyyafgw46z2uaeehbny\node_modules\next\dist\server\base-server.js:804:17) at async XXXXXXXXXXXXXXXXXX\Education\nextjs-dashboard\node_modules.pnpm\next@15.0.0-rc.0_react-dom@19.0.0-rc-f994737d14-20240522_react@19.0.0-rc-f994737d14-20240522ru4vnckpyyafgw46z2uaeehbny\node_modules\next\dist\server\dev\next-dev-server.js:339:20 at async Span.traceAsyncFn (XXXXXXXXXXXXXXXXXX\Education\nextjs-dashboard\node_modules.pnpm\next@15.0.0-rc.0_react-dom@19.0.0-rc-f994737d14-20240522_react@19.0.0-rc-f994737d14-20240522ru4vnckpyyafgw46z2uaeehbny\node_modules\next\dist\trace\trace.js:157:20) at async DevServer.handleRequest (XXXXXXXXXXXXXXXXXX\Education\nextjs-dashboard\node_modules.pnpm\next@15.0.0-rc.0_react-dom@19.0.0-rc-f994737d14-20240522_react@19.0.0-rc-f994737d14-20240522ru4vnckpyyafgw46z2uaeehbny\node_modules\next\dist\server\dev\next-dev-server.js:336:24) at async invokeRender (XXXXXXXXXXXXXXXXXX\Education\nextjs-dashboard\node_modules.pnpm\next@15.0.0-rc.0_react-dom@19.0.0-rc-f994737d14-20240522_react@19.0.0-rc-f994737d14-20240522ru4vnckpyyafgw46z2uaeehbny\node_modules\next\dist\server\lib\router-server.js:175:21) at async handleRequest (XXXXXXXXXXXXXXXXXX\Education\nextjs-dashboard\node_modules.pnpm\next@15.0.0-rc.0_react-dom@19.0.0-rc-f994737d14-20240522_react@19.0.0-rc-f994737d14-20240522ru4vnckpyyafgw46z2uaeehbny\node_modules\next\dist\server\lib\router-server.js:354:24) at async requestHandlerImpl (XXXXXXXXXXXXXXXXXX\Education\nextjs-dashboard\node_modules.pnpm\next@15.0.0-rc.0_react-dom@19.0.0-rc-f994737d14-20240522_react@19.0.0-rc-f994737d14-20240522ru4vnckpyyafgw46z2uaeehbny\node_modules\next\dist\server\lib\router-server.js:378:13) at async Server.requestListener (XXXXXXXXXXXXXXXXXX\Education\nextjs-dashboard\node_modules.pnpm\next@15.0.0-rc.0_react-dom@19.0.0-rc-f994737d14-20240522_react@19.0.0-rc-f994737d14-20240522ru4vnckpyyafgw46z2uaeehbny\node_modules\next\dist\server\lib\start-server.js:142:13) { page: '/seed' } ○ Compiling /_error ... ✓ Compiled /_error in 913ms (810 modules) GET /seed 500 in 2243ms

OS: Win 11 Browser: Firefox

What can I do?

Gentle-Cannibal commented 4 months ago

The right answer is here. You should start a deployed project on vercel.com. And there use /seed address. Because I run local project. It was a mistake.)

qlxxkj commented 4 months ago

I get the same issuse,when i try to seed DB with vscode in local envrionment.

ChamithSoyza commented 3 months ago

The right answer is here. You should start a deployed project on vercel.com. And there use /seed address. Because I run local project. It was a mistake.)

Thanks

yafei98 commented 3 months ago

Good day everyone. 👋 When I try to seed DB I get the next error.

Error: [object Object] at getProperError (XXXXXXXXXXXXXXXXXX\Education\nextjs-dashboard\node_modules.pnpm\next@15.0.0-rc.0_react-dom@19.0.0-rc-f994737d14-20240522_react@19.0.0-rc-f994737d14-20240522__ru4vnckpyyafgw46z2uaeehbny\node_modules\next\dist\lib\is-error.js:41:12) at DevServer.renderToResponseImpl (XXXXXXXXXXXXXXXXXX\Education\nextjs-dashboard\node_modules.pnpm\next@15.0.0-rc.0_react-dom@19.0.0-rc-f994737d14-20240522_react@19.0.0-rc-f994737d14-20240522__ru4vnckpyyafgw46z2uaeehbny\node_modules\next\dist\server\base-server.js:2038:53) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async DevServer.pipeImpl (XXXXXXXXXXXXXXXXXX\Education\nextjs-dashboard\node_modules.pnpm\next@15.0.0-rc.0_react-dom@19.0.0-rc-f994737d14-20240522_react@19.0.0-rc-f994737d14-20240522__ru4vnckpyyafgw46z2uaeehbny\node_modules\next\dist\server\base-server.js:908:25) at async NextNodeServer.handleCatchallRenderRequest (XXXXXXXXXXXXXXXXXX\Education\nextjs-dashboard\node_modules.pnpm\next@15.0.0-rc.0_react-dom@19.0.0-rc-f994737d14-20240522_react@19.0.0-rc-f994737d14-20240522__ru4vnckpyyafgw46z2uaeehbny\node_modules\next\dist\server\next-server.js:273:17) at async DevServer.handleRequestImpl (XXXXXXXXXXXXXXXXXX\Education\nextjs-dashboard\node_modules.pnpm\next@15.0.0-rc.0_react-dom@19.0.0-rc-f994737d14-20240522_react@19.0.0-rc-f994737d14-20240522__ru4vnckpyyafgw46z2uaeehbny\node_modules\next\dist\server\base-server.js:804:17) at async XXXXXXXXXXXXXXXXXX\Education\nextjs-dashboard\node_modules.pnpm\next@15.0.0-rc.0_react-dom@19.0.0-rc-f994737d14-20240522_react@19.0.0-rc-f994737d14-20240522__ru4vnckpyyafgw46z2uaeehbny\node_modules\next\dist\server\dev\next-dev-server.js:339:20 at async Span.traceAsyncFn (XXXXXXXXXXXXXXXXXX\Education\nextjs-dashboard\node_modules.pnpm\next@15.0.0-rc.0_react-dom@19.0.0-rc-f994737d14-20240522_react@19.0.0-rc-f994737d14-20240522__ru4vnckpyyafgw46z2uaeehbny\node_modules\next\dist\trace\trace.js:157:20) at async DevServer.handleRequest (XXXXXXXXXXXXXXXXXX\Education\nextjs-dashboard\node_modules.pnpm\next@15.0.0-rc.0_react-dom@19.0.0-rc-f994737d14-20240522_react@19.0.0-rc-f994737d14-20240522__ru4vnckpyyafgw46z2uaeehbny\node_modules\next\dist\server\dev\next-dev-server.js:336:24) at async invokeRender (XXXXXXXXXXXXXXXXXX\Education\nextjs-dashboard\node_modules.pnpm\next@15.0.0-rc.0_react-dom@19.0.0-rc-f994737d14-20240522_react@19.0.0-rc-f994737d14-20240522__ru4vnckpyyafgw46z2uaeehbny\node_modules\next\dist\server\lib\router-server.js:175:21) at async handleRequest (XXXXXXXXXXXXXXXXXX\Education\nextjs-dashboard\node_modules.pnpm\next@15.0.0-rc.0_react-dom@19.0.0-rc-f994737d14-20240522_react@19.0.0-rc-f994737d14-20240522__ru4vnckpyyafgw46z2uaeehbny\node_modules\next\dist\server\lib\router-server.js:354:24) at async requestHandlerImpl (XXXXXXXXXXXXXXXXXX\Education\nextjs-dashboard\node_modules.pnpm\next@15.0.0-rc.0_react-dom@19.0.0-rc-f994737d14-20240522_react@19.0.0-rc-f994737d14-20240522__ru4vnckpyyafgw46z2uaeehbny\node_modules\next\dist\server\lib\router-server.js:378:13) at async Server.requestListener (XXXXXXXXXXXXXXXXXX\Education\nextjs-dashboard\node_modules.pnpm\next@15.0.0-rc.0_react-dom@19.0.0-rc-f994737d14-20240522_react@19.0.0-rc-f994737d14-20240522__ru4vnckpyyafgw46z2uaeehbny\node_modules\next\dist\server\lib\start-server.js:142:13) { page: '/seed' } ○ Compiling /_error ... ✓ Compiled /_error in 913ms (810 modules) GET /seed 500 in 2243ms

OS: Win 11 Browser: Firefox

What can I do?

Have you resolved this question?

yafei98 commented 3 months ago

The right answer is here. You should start a deployed project on vercel.com. And there use /seed address. Because I run local project. It was a mistake.)

Could you please tell me more details? I also had this problem. image

Gentle-Cannibal commented 3 months ago

The right answer is here. You should start a deployed project on vercel.com. And there use /seed address. Because I run local project. It was a mistake.)

Could you please tell me more details? I also had this problem. image

To tell the truth, I don't know what else to say about this. You have to deploy your project onto a Vercel environment, as it is described in the course. Then run that deployed project and use /seed address. I want to say, that I had different problems after this stage and didn't finish the course as a whole. You should be ready for this too, just in case. 🙂

yafei98 commented 3 months ago

Okay, thanks so much. I've been caught in this question for lots of days. I've deployed the project and use /seed address. However, they didn't work. image

aidinio commented 3 months ago

About the problem with seeding the local postgres database, I have edited the route.ts file so seeding a local postgres database would be possible in the dashboard project. You can look at the file here.

yafei98 commented 3 months ago

About the problem with seeding the local postgres database, I have edited the route.ts file so seeding a local postgres database would be possible in the dashboard project. You can look at the file here.

Okay, thanks so much.

KinonoChen commented 3 months ago

The right answer is here. You should start a deployed project on vercel.com. And there use /seed address. Because I run local project. It was a mistake.)

hello! I'm having this problem: I can successfully seed an application that I deployed on vercel, but it keeps failing to seed locally, maybe vercel doesn't support local connections to vercel/postgres?

aidinio commented 3 months ago

The right answer is here. You should start a deployed project on vercel.com. And there use /seed address. Because I run local project. It was a mistake.)

hello! I'm having this problem: I can successfully seed an application that I deployed on vercel, but it keeps failing to seed locally, maybe vercel doesn't support local connections to vercel/postgres?

Copy my gist. It should fix your problem.

sergealagon commented 2 months ago

The right answer is here. You should start a deployed project on vercel.com. And there use /seed address. Because I run local project. It was a mistake.)

hello! I'm having this problem: I can successfully seed an application that I deployed on vercel, but it keeps failing to seed locally, maybe vercel doesn't support local connections to vercel/postgres?

Copy my gist. It should fix your problem.

i did this and it works! now i'm stuck at next chapter. since as per nextjs guide:

Note: If you used your own database provider in Chapter 6, you'll need to update the database queries to work with your provider. You can find the queries in /app/lib/data.ts.

what adjustments did you do for data.ts?

aidinio commented 2 months ago

The right answer is here. You should start a deployed project on vercel.com. And there use /seed address. Because I run local project. It was a mistake.)

hello! I'm having this problem: I can successfully seed an application that I deployed on vercel, but it keeps failing to seed locally, maybe vercel doesn't support local connections to vercel/postgres?

Copy my gist. It should fix your problem.

i did this and it works! now i'm stuck at next chapter. since as per nextjs guide:

Note: If you used your own database provider in Chapter 6, you'll need to update the database queries to work with your provider. You can find the queries in /app/lib/data.ts.

what adjustments did you do for data.ts?

The default SQL queries worked for me. I just had a problem with typescript giving me errors for type. So I had to change types to arrays, for example, I had to change

const data = await sql<InvoiceForm>`
      SELECT
        invoices.id,
        invoices.customer_id,
        invoices.amount,
        invoices.status
      FROM invoices
      WHERE invoices.id = ${id};
    `;

to this:

const data = await sql<InvoiceForm[]>`
      SELECT
        invoices.id,
        invoices.customer_id,
        invoices.amount,
        invoices.status
      FROM invoices
      WHERE invoices.id = ${id};
    `;

I think I made some minor adjustments to return values. For example, instead of returning data, I returned data[0]. I'm not sure what exact change I did to return values, but I'm sure you'll be able to fix it if you spend a little time tweaking it.

andrezatcascais commented 2 months ago

About the problem with seeding the local postgres database, I have edited the route.ts file so seeding a local postgres database would be possible in the dashboard project. You can look at the file here.

Thank you! Show

wyking1997 commented 2 months ago

After doing @aidinio 's change, I still had issues at the next chapter. To fix these issues I had to change the lib/data.ts like bellow

import {
  CustomerField,
  CustomersTableType,
  InvoiceForm,
  InvoicesTable,
  LatestInvoiceRaw,
  Revenue,
} from './definitions';
import { client } from "../seed/route";

import { formatCurrency } from './utils';

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 client.sql`SELECT * FROM revenue`;

    // console.log('Data fetch completed after 3 seconds.');

    return data;
  } catch (error) {
    console.error('Database Error:', error);
    throw new Error('Failed to fetch revenue data.');
  }
}

export async function fetchLatestInvoices() {
  try {
    const data = await client.sql`
      SELECT invoices.amount, customers.name, customers.image_url, customers.email, invoices.id
      FROM invoices
      JOIN customers ON invoices.customer_id = customers.id
      ORDER BY invoices.date DESC
      LIMIT 5`;

    const latestInvoices = data.map((invoice) => ({
      ...invoice,
      amount: formatCurrency(invoice.amount),
    }));
    return latestInvoices;
  } catch (error) {
    console.error('Database Error:', error);
    throw new Error('Failed to fetch the latest invoices.');
  }
}

export async function fetchCardData() {
  try {
    // You can probably combine these into a single SQL query
    // However, we are intentionally splitting them to demonstrate
    // how to initialize multiple queries in parallel with JS.
    const invoiceCountPromise = client.sql`SELECT COUNT(*) FROM invoices`;
    const customerCountPromise = client.sql`SELECT COUNT(*) FROM customers`;
    const invoiceStatusPromise = client.sql`SELECT
         SUM(CASE WHEN status = 'paid' THEN amount ELSE 0 END) AS "paid",
         SUM(CASE WHEN status = 'pending' THEN amount ELSE 0 END) AS "pending"
         FROM invoices`;

    const data = await Promise.all([
      invoiceCountPromise,
      customerCountPromise,
      invoiceStatusPromise,
    ]);

    console.log("dadta", data);
    const numberOfInvoices = Number(data[0][0].count ?? '0');
    const numberOfCustomers = Number(data[1][0].count ?? '0');
    const totalPaidInvoices = formatCurrency(data[2][0].paid ?? '0');
    const totalPendingInvoices = formatCurrency(data[2][0].pending ?? '0');

    return {
      numberOfCustomers,
      numberOfInvoices,
      totalPaidInvoices,
      totalPendingInvoices,
    };
  } catch (error) {
    console.error('Database Error:', error);
    throw new Error('Failed to fetch card data.');
  }
}

const ITEMS_PER_PAGE = 6;
export async function fetchFilteredInvoices(
  query: string,
  currentPage: number,
) {
  const offset = (currentPage - 1) * ITEMS_PER_PAGE;

  try {
    const invoices = await client.sql`
      SELECT
        invoices.id,
        invoices.amount,
        invoices.date,
        invoices.status,
        customers.name,
        customers.email,
        customers.image_url
      FROM invoices
      JOIN customers ON invoices.customer_id = customers.id
      WHERE
        customers.name ILIKE ${`%${query}%`} OR
        customers.email ILIKE ${`%${query}%`} OR
        invoices.amount::text ILIKE ${`%${query}%`} OR
        invoices.date::text ILIKE ${`%${query}%`} OR
        invoices.status ILIKE ${`%${query}%`}
      ORDER BY invoices.date DESC
      LIMIT ${ITEMS_PER_PAGE} OFFSET ${offset}
    `;

    return invoices;
  } catch (error) {
    console.error('Database Error:', error);
    throw new Error('Failed to fetch invoices.');
  }
}

export async function fetchInvoicesPages(query: string) {
  try {
    const count = await client.sql`SELECT COUNT(*)
    FROM invoices
    JOIN customers ON invoices.customer_id = customers.id
    WHERE
      customers.name ILIKE ${`%${query}%`} OR
      customers.email ILIKE ${`%${query}%`} OR
      invoices.amount::text ILIKE ${`%${query}%`} OR
      invoices.date::text ILIKE ${`%${query}%`} OR
      invoices.status ILIKE ${`%${query}%`}
  `;

    const totalPages = Math.ceil(Number(count[0].count) / ITEMS_PER_PAGE);
    return totalPages;
  } catch (error) {
    console.error('Database Error:', error);
    throw new Error('Failed to fetch total number of invoices.');
  }
}

export async function fetchInvoiceById(id: string) {
  try {
    const data = await client.sql`
      SELECT
        invoices.id,
        invoices.customer_id,
        invoices.amount,
        invoices.status
      FROM invoices
      WHERE invoices.id = ${id};
    `;

    const invoice = data.map((invoice) => ({
      ...invoice,
      // Convert amount from cents to dollars
      amount: invoice.amount / 100,
    }));

    return invoice[0];
  } catch (error) {
    console.error('Database Error:', error);
    throw new Error('Failed to fetch invoice.');
  }
}

export async function fetchCustomers() {
  try {
    const data = await client.sql`
      SELECT
        id,
        name
      FROM customers
      ORDER BY name ASC
    `;

    const customers = data;
    return customers;
  } catch (err) {
    console.error('Database Error:', err);
    throw new Error('Failed to fetch all customers.');
  }
}

export async function fetchFilteredCustomers(query: string) {
  try {
    const data = await client.sql`
        SELECT
          customers.id,
          customers.name,
          customers.email,
          customers.image_url,
          COUNT(invoices.id) AS total_invoices,
          SUM(CASE WHEN invoices.status = 'pending' THEN invoices.amount ELSE 0 END) AS total_pending,
          SUM(CASE WHEN invoices.status = 'paid' THEN invoices.amount ELSE 0 END) AS total_paid
        FROM customers
        LEFT JOIN invoices ON customers.id = invoices.customer_id
        WHERE
          customers.name ILIKE ${`%${query}%`} OR
        customers.email ILIKE ${`%${query}%`}
        GROUP BY customers.id, customers.name, customers.email, customers.image_url
        ORDER BY customers.name ASC
      `;

    const customers = data.map((customer) => ({
      ...customer,
      total_pending: formatCurrency(customer.total_pending),
      total_paid: formatCurrency(customer.total_paid),
    }));

    return customers;
  } catch (err) {
    console.error('Database Error:', err);
    throw new Error('Failed to fetch customer table.');
  }
}
aaryandewan commented 2 months ago

Ok to anyone suffering from the same problem, this is what you need to do:

1) Make sure that you have uncommented out the seed/route.ts file 2) You need to deploy your project on vercel.com 3) Go to this url in your browser (whatever your deployed app's URL is obviously not this exact URL) image 4) Go to it's /seed. Do not go to localhost:3000/seed, instead go to "https://next-learn-o9ve.vercel.app/seed" [GO TO YOUR PROJECT's URL]

orrymr commented 1 month ago

The right answer is here. You should start a deployed project on vercel.com. And there use /seed address. Because I run local project. It was a mistake.)

The docs clearly state:

Ensure your local development server is running with pnpm run dev and navigate to [localhost:3000/seed](http://localhost:3000/seed) in your browser. When finished, you will see a message "Database seeded successfully" in the browser. Once completed, you can delete this file.

As in, do it locally. Yet, this doesn't work. I also had to deploy in order to seed.

ok2fly commented 1 month ago

By the way,i have to access github or vercel by a vpn using clashx, I also have the same error when uncomment the code in seed/route.s then running the code locally by follow instruction in the chapter 6, and solve the error by doing the following:

  1. push the code to github
  2. wait for vercel finishing deploy, and visit https://nextjs-dashboard-omega-pied-21.vercel.app/seed
  3. turn on vpn and paste and run export https_proxy=http://127.0.0.1:7890 http_proxy=http://127.0.0.1:7890 all_proxy=socks5://127.0.0.1:7890 in terminal
  4. vist 'http://127.0.0.1:3000/seed' then found the error gone, everything is ok
riadraz commented 1 month ago

Ok to anyone suffering from the same problem, this is what you need to do:

  1. Make sure that you have uncommented out the seed/route.ts file
  2. You need to deploy your project on vercel.com
  3. Go to this url in your browser (whatever your deployed app's URL is obviously not this exact URL) image
  4. Go to it's /seed. Do not go to localhost:3000/seed, instead go to "https://next-learn-o9ve.vercel.app/seed" [GO TO YOUR PROJECT's URL]

Thank you , its work for me...

zava810 commented 1 week ago
  1. as instructed to go to https://project_url/seed , i am opening https://nextzs.vercel.app/seed . on this page it shows : {"message":""} .
  2. in app/seed/route.ts GET function there are 2 return statements . I commented out 1st as export async function GET() { //return Response.json({ message: '', }); try { await client.sqlBEGIN; await seedUsers(); await seedCustomers(); await seedInvoices(); await seedRevenue(); await client.sqlCOMMIT`;

    return Response.json({ message: 'Database seeded successfully' }); } catch (error) { await client.sqlROLLBACK; return Response.json({ error }, { status: 500 }); } }`

  3. as instructed to go to https://project_url/seed , i am opening https://nextzs.vercel.app/seed . on this page it shows : {"message":"Database seeded successfully"}