Nextjs Learn - Chapter 12 error

[mike-schmidt]

In going through chapter 12 - mutating data on the Dashboard Project, I’m running into an error around the UUID to postgres and I’m unsure what’s causing it since I’m using the code being provided in the chapter. Any ideas what’s causing this?

PostgresError: invalid input syntax for type uuid: "%24%7Bid%7D"
    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)
    at resolveErrorDev (http://localhost:3000/_next/static/chunks/f07ee_next_dist_compiled_072afd38._.js:17582:48)
    at getOutlinedModel (http://localhost:3000/_next/static/chunks/f07ee_next_dist_compiled_072afd38._.js:17283:28)
    at parseModelString (http://localhost:3000/_next/static/chunks/f07ee_next_dist_compiled_072afd38._.js:17362:52)
    at Array.<anonymous> (http://localhost:3000/_next/static/chunks/f07ee_next_dist_compiled_072afd38._.js:17839:51)
    at JSON.parse (<anonymous>)
    at resolveConsoleEntry (http://localhost:3000/_next/static/chunks/f07ee_next_dist_compiled_072afd38._.js:17719:32)
    at processFullStringRow (http://localhost:3000/_next/static/chunks/f07ee_next_dist_compiled_072afd38._.js:17816:17)
    at processFullBinaryRow (http://localhost:3000/_next/static/chunks/f07ee_next_dist_compiled_072afd38._.js:17786:9)
    at progress (http://localhost:3000/_next/static/chunks/f07ee_next_dist_compiled_072afd38._.js:17932:102)
    at Page (<anonymous>)

**(page.tsx)**
 import Form from '@/app/ui/invoices/edit-form';
 import Breadcrumbs from '@/app/ui/invoices/breadcrumbs';
 import { fetchInvoiceById, fetchCustomers } from '@/app/lib/data';
  
 export default async function Page(props: { params: Promise<{ id: string }> }) {
   const params = await props.params;
   const id = params.id;
   const [invoice, customers] = await Promise.all([
     fetchInvoiceById(id),
     fetchCustomers(),
   ]);
   
   return (  
     <main>
       <Breadcrumbs
         breadcrumbs={[
           { label: 'Invoices', href: '/dashboard/invoices' },
           {
             label: 'Edit Invoice',
             href: `/dashboard/invoices/${id}/edit`,
             active: true,
           },
         ]}
       />
       <Form invoice={invoice} customers={customers} />
     </main>
   );
 }

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

**(data.ts)**
export async function fetchInvoiceById(id: string) {
   try {
     console.log("id:", id);
     const data = await sql<InvoiceForm[]>`
       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.');
   }
 }

[jacobparis]

If you decode those symbols you get a literal string ${id} . You can try this in your browser console to test

decodeURIComponent('%24%7Bid%7D')
'${id}'

The most common reason that would happen is if you were straight quotes instead of backticks in a string, so that the ${} template literals don’t work and are treated like regular string characters.

But I’m not seeing that in the code you’ve provided, you do have proper backticks here, so is there any chance that the URL actually has /dashboard/invoices/${id}/edit in it instead of the real ID?

[mike-schmidt]

Confirmed that everything is a backtic and when I hover over the 1st item in the invoices table, you can see the UUID in the url (lower right corner)

[mike-schmidt]

I’m unsure what I did but while checking that everything was a backtic and not a single quote, it appears to have resolved itself. Thanks for pointing me in a direction