Where does the id format get configured in "/invoice/[id]" in the tutorial?
Answered
Gharial posted this in #help-forum
GharialOP
I'm going through the dashboard project tutorial for NextJS and am on Chapter 13: Handling Errors. I was working on implementing the notFound function and noticed something interesting
When I use this link
http://localhost:3000/dashboard/invoices/12/edit
When I use this link
http://localhost:3000/dashboard/invoices/2e94d1ed-d220-449f-9f11-f0bbceed9645/edit
Where is the id format defined?
Is this a uuid thing or a nextjs thing?
When I use this link
http://localhost:3000/dashboard/invoices/12/edit
/dashboard/invoices/error.tsx
would triggerWhen I use this link
http://localhost:3000/dashboard/invoices/2e94d1ed-d220-449f-9f11-f0bbceed9645/edit
/dashboard/invoices/[id]/edit/not-found.tsx
would triggerWhere is the id format defined?
Is this a uuid thing or a nextjs thing?
Answered by Ray
export async function fetchInvoiceById(id: string) {
try {
const data = await sql<InvoiceForm>`
SELECT
invoices.id,
invoices.customer_id,
invoices.amount,
invoices.status
FROM invoices
WHERE invoices.id = ${id};
`;
const invoice = data.rows.map((invoice) => ({
...invoice,
// Convert amount from cents to dollars
amount: invoice.amount / 100,
}));
return invoice[0];
} catch (error) {
console.error("Database Error:", error);
}
}
this is what i have, yes because you throw it
21 Replies
GharialOP
here's a link to the tutorial
https://nextjs.org/learn/dashboard-app
https://nextjs.org/learn/dashboard-app
Ray
I get 404 when visiting to http://localhost:3000/dashboard/invoices/12/edit
but when you get to the error page, it should be something wrong with the
but when you get to the error page, it should be something wrong with the
fetchInvoiceById
functionGharialOP
huh interesting. I'll check that out. Weird bug
did you by chance edit the
by default they have
while in the actions we define the errors like
did you by chance edit the
fetchInvoiceById
function?by default they have
export async function fetchInvoiceById(id: string) {
noStore();
try {
const data = await sql<InvoiceForm>`
SELECT
invoices.id,
invoices.customer_id,
invoices.amount,
invoices.status
FROM invoices
WHERE invoices.id = ${id};
`;
const invoice = data.rows.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.');
}
}
while in the actions we define the errors like
} catch (error) {
return { message: 'Database Error: Faied to create invoice.' };
}
maybe because I'm throwing?
I doubt it though
I doubt it though
Ray
export async function fetchInvoiceById(id: string) {
try {
const data = await sql<InvoiceForm>`
SELECT
invoices.id,
invoices.customer_id,
invoices.amount,
invoices.status
FROM invoices
WHERE invoices.id = ${id};
`;
const invoice = data.rows.map((invoice) => ({
...invoice,
// Convert amount from cents to dollars
amount: invoice.amount / 100,
}));
return invoice[0];
} catch (error) {
console.error("Database Error:", error);
}
}
this is what i have, yes because you throw it
Answer
Ray
it should return null, if not found instead of throwing
GharialOP
Oh got it
i tried to
and that rendered out the
plainly console logging the error though allowed
i'm guessing because of what you're saying about needing to return null
i tried to
return { message: ... }
and that rendered out the
error.tsx
plainly console logging the error though allowed
not-found.tsx
to loadi'm guessing because of what you're saying about needing to return null
Ray
yep then handle it with
notFound
GharialOP
is that a quirk of a ... - i forget how we classify these here
they're services
but they're not actions
how do we call this kind of function?
they're services
but they're not actions
how do we call this kind of function?
thanks for the help btw
Ray
query? I don't get it 😆
GharialOP
like
while
trying to understand the distinction associated with the separation because they all fall under (C)reate,(R)ead,(U)pdate,(D)estroy
/lib/actions.tsx
are server actions for Create Update Deletewhile
/lib/data.tsx
are (you're right they totally are just get requests so queries make sense)trying to understand the distinction associated with the separation because they all fall under (C)reate,(R)ead,(U)pdate,(D)estroy
both working against the same db
just trying to understand their reasoning for separating the GET reqs vs everything else
just trying to understand their reasoning for separating the GET reqs vs everything else
makes sense
just never seen that distinction before
just never seen that distinction before
Ray
data layer? data access?
GharialOP
im more accustomed to resource1/crud , resource2/crud
vs this being more
cud/all-resources
r/all-resources
vs this being more
cud/all-resources
r/all-resources
Ray
page = r
server action = cud
server action = cud
GharialOP
ill take it lol
appreciate the help ðŸ™
Ray
np please mark solution