1
PostgresError: invalid input syntax for type uuid: "%24%7Bid%7D"
2
    at fetchInvoiceById (rsc://React/Server/C:%5Ccode%5Creact_course%5Cnextjs-dashboard%5C.next%5Cserver%5Cchunks%5Cssr%5C%5Broot-of-the-server%5D__be6bc496._.js?32:399:31)
3
    at resolveErrorDev (http://localhost:3000/_next/static/chunks/f07ee_next_dist_compiled_072afd38._.js:17582:48)
4
    at getOutlinedModel (http://localhost:3000/_next/static/chunks/f07ee_next_dist_compiled_072afd38._.js:17283:28)
5
    at parseModelString (http://localhost:3000/_next/static/chunks/f07ee_next_dist_compiled_072afd38._.js:17362:52)
6
    at Array.<anonymous> (http://localhost:3000/_next/static/chunks/f07ee_next_dist_compiled_072afd38._.js:17839:51)
7
    at JSON.parse (<anonymous>)
8
    at resolveConsoleEntry (http://localhost:3000/_next/static/chunks/f07ee_next_dist_compiled_072afd38._.js:17719:32)
9
    at processFullStringRow (http://localhost:3000/_next/static/chunks/f07ee_next_dist_compiled_072afd38._.js:17816:17)
10
    at processFullBinaryRow (http://localhost:3000/_next/static/chunks/f07ee_next_dist_compiled_072afd38._.js:17786:9)
11
    at progress (http://localhost:3000/_next/static/chunks/f07ee_next_dist_compiled_072afd38._.js:17932:102)
12
    at Page (<anonymous>)

1
**(page.tsx)**
2
 import Form from '@/app/ui/invoices/edit-form';
3
 import Breadcrumbs from '@/app/ui/invoices/breadcrumbs';
4
 import { fetchInvoiceById, fetchCustomers } from '@/app/lib/data';
5
  
6
 export default async function Page(props: { params: Promise<{ id: string }> }) {
7
   const params = await props.params;
8
   const id = params.id;
9
   const [invoice, customers] = await Promise.all([
10
     fetchInvoiceById(id),
11
     fetchCustomers(),
12
   ]);
13
   
14
   return (  
15
     <main>
16
       <Breadcrumbs
17
         breadcrumbs={[
18
           { label: 'Invoices', href: '/dashboard/invoices' },
19
           {
20
             label: 'Edit Invoice',
21
             href: `/dashboard/invoices/${id}/edit`,
22
             active: true,
23
           },
24
         ]}
25
       />
26
       <Form invoice={invoice} customers={customers} />
27
     </main>
28
   );
29
 }

1
**(buttons.tsx)**
2
 export function UpdateInvoice({ id }: { id: string }) {
3
   return (
4
     <Link
5
       href={`/dashboard/invoices/${id}/edit`}
6
       className="rounded-md border p-2 hover:bg-gray-100"
7
     >
8
       <PencilIcon className="w-5" />
9
     </Link>
10
   );
11
 }

1
**(data.ts)**
2
export async function fetchInvoiceById(id: string) {
3
   try {
4
     console.log("id:", id);
5
     const data = await sql<InvoiceForm[]>`
6
       SELECT
7
         invoices.id,
8
         invoices.customer_id,
9
         invoices.amount,
10
         invoices.status
11
       FROM invoices
12
       WHERE invoices.id = ${id};
13
     `;
14
 
15
     const invoice = data.map((invoice) => ({
16
       ...invoice,
17
       // Convert amount from cents to dollars
18
       amount: invoice.amount / 100,
19
     }));
20
 
21
     return invoice[0];
22
   } catch (error) {
23
     console.error('Database Error:', error);
24
     throw new Error('Failed to fetch invoice.');
25
   }
26
 }