farhanalimagsi
commented
1 month ago I tried these 3 steps and it worked for me.
- update packages into latest versions.
- use this code to app/seed/routes.tsx
import { db } from '@vercel/postgres';
import { invoices, customers, revenue, users } from '../lib/placeholder-data';
const client = await db.connect();
async function seedUsers() {
await client.sql`CREATE EXTENSION IF NOT EXISTS "uuid-ossp";`;
await client.sql`
CREATE TABLE IF NOT EXISTS users (
id UUID DEFAULT uuid_generate_v4() PRIMARY KEY,
name VARCHAR(255) NOT NULL,
email TEXT NOT NULL UNIQUE,
password TEXT NOT NULL
);
`;
const insertedUsers = await Promise.all(
users.map(async (user) => {
const hashedPassword = await bcrypt.hash(user.password, 10);
return client.sql`
INSERT INTO users (id, name, email, password)
VALUES (${user.id}, ${user.name}, ${user.email}, ${hashedPassword})
ON CONFLICT (id) DO NOTHING;
`;
})
);
return insertedUsers;
}
async function seedInvoices() {
await client.sql`CREATE EXTENSION IF NOT EXISTS "uuid-ossp";`;
await client.sql`
CREATE TABLE IF NOT EXISTS invoices (
id UUID DEFAULT uuid_generate_v4() PRIMARY KEY,
customer_id UUID NOT NULL,
amount INT NOT NULL,
status VARCHAR(255) NOT NULL,
date DATE NOT NULL
);
`;
const insertedInvoices = await Promise.all(
invoices.map(
(invoice) => client.sql`
INSERT INTO invoices (customer_id, amount, status, date)
VALUES (${invoice.customer_id}, ${invoice.amount}, ${invoice.status}, ${invoice.date})
ON CONFLICT (id) DO NOTHING;
`
)
);
return insertedInvoices;
}
async function seedCustomers() {
await client.sql`CREATE EXTENSION IF NOT EXISTS "uuid-ossp";`;
await client.sql`
CREATE TABLE IF NOT EXISTS customers (
id UUID DEFAULT uuid_generate_v4() PRIMARY KEY,
name VARCHAR(255) NOT NULL,
email VARCHAR(255) NOT NULL,
image_url VARCHAR(255) NOT NULL
);
`;
const insertedCustomers = await Promise.all(
customers.map(
(customer) => client.sql`
INSERT INTO customers (id, name, email, image_url)
VALUES (${customer.id}, ${customer.name}, ${customer.email}, ${customer.image_url})
ON CONFLICT (id) DO NOTHING;
`
)
);
return insertedCustomers;
}
async function seedRevenue() {
await client.sql`
CREATE TABLE IF NOT EXISTS revenue (
month VARCHAR(4) NOT NULL UNIQUE,
revenue INT NOT NULL
);
`;
const insertedRevenue = await Promise.all(
revenue.map(
(rev) => client.sql`
INSERT INTO revenue (month, revenue)
VALUES (${rev.month}, ${rev.revenue})
ON CONFLICT (month) DO NOTHING;
`
)
);
return insertedRevenue;
}
export async function GET() {
try {
await client.sql`BEGIN`;
await seedUsers();
await seedCustomers();
await seedInvoices();
await seedRevenue();
await client.sql`COMMIT`;
return new Response(JSON.stringify({ message: 'Database seeded successfully' }), { status: 200 });
} catch (error) {
await client.sql`ROLLBACK`;
return new Response(JSON.stringify({ error: error.message }), { status: 500 });
} finally {
await client.end(); // Ensure the connection is closed
}
} ```
3. In command line delete .next file: $ rm -rf .next
4. then $ pnpm dev or npm run dev
save the file, check the link: http://localhost:3000/seed
ifiya
I had tried so many time. and also followed all the steps from docs but still does not works. At first in the data tab of database at vercel no table is showing. Now when I started the whole process from scratch I am seeing this message in the browser
Application error: a client-side exception has occurred (see the browser console for more information).
When I checked in to console it's showing :
/**/
Error: Invariant: Missing ActionQueueContext at useReducerWithReduxDevtoolsImpl (use-reducer-with-devtools.js?e0061:95:15) at Router (app-router.js?c6321:207:100) at callComponentInDEV (react-dom-client.development.js:1015:18) at renderWithHooks (react-dom-client.development.js:13508:18) at updateFunctionComponent (react-dom-client.development.js:18260:20) at beginWork (react-dom-client.development.js:20172:16) at runWithFiberInDEV (react-dom-client.development.js:1152:14) at performUnitOfWork (react-dom-client.development.js:28709:14) at workLoopSync (react-dom-client.development.js:28417:5) at renderRootSync (react-dom-client.development.js:28372:7)
The above error occurred in the component.
React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundaryHandler.
/****/ Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received.