Error when trying to fetchInvoiceById

[connorwforsyth]

I've been working through learning next dashboard course and at around chapter 13, I'm getting an error and can't resolve when clicking on editing an invoice.

The error is:

 app/lib/data.ts (176:10) @ fetchInvoiceById
 ⨯ Error: Failed to fetch invoice.
    at fetchInvoiceById (./app/lib/data.ts:159:15)
    at async Promise.all (index 0)
    at async Page (./app/dashboard/invoices/[id]/edit/page.tsx:16:34)
digest: "2772198818"
  174 |   } catch (error) {
  175 |     console.error('Database Error:', error);
> 176 |     throw new Error('Failed to fetch invoice.');
      |          ^
  177 |   }
  178 | }
  179 |

Hope you can help! Cheers.

Link to location in docs Repo link

[boris-ny]

Same, just reached the same error. Tried going through their final example but couldn't solve the error and I think I made it worse

[weisisheng]

Same here

[JacksonKitundu]

You need to be connected to the internet. I think it fails because there are some images that need to be downloaded from the image url column.

[Aishete]

same here, some one please help

[mikesmo]

I was having this error and then I realised that this line was wrong: /app/ui/invoices/buttons.tsx

href="/dashboard/invoices/${id}/edit"

should be:

href={`/dashboard/invoices/${id}/edit`}

[silversunlight]

met the same problem, still got no idea because I'm not familiar with javascript. i print out the id before the sql executes, the result is "%24%7Bid%7D" , I decode this then got ${id) ... seems this javascript grammar doesn't work.

[2xx]

On Vercel Postgres, format of id would be vertified strictly.

that fake UUID is OK http://localhost:3000/dashboard/invoices/2e94d1ed-d220-449f-9f11-f0bbceed9645/edit

but replace to 'xxxooo' will throw an error, because 'xxxooo' isn't normal format of UUID http://localhost:3000/dashboard/invoices/xxxooo/edit

My solution: In /app/dashboard/invoices/[id]/edit/page.tsx , replace the code to: fetchInvoiceById(id).catch(()=>{})

then the code below is working

if(!invoice) {
    notFound()
}

[guikrusemark]

This error occurs because Next does not find a not-found.tsx file at the same level as the [id] directory to handle the error thrown in notFound(). The image shown in chapter thirteen erroneously shows the not-found.tsx file at the same level as the edit directory, but it must be a fallback to the level at which the not-found error occurs.

SOLUTION: Just put not-found.tsx one or more levels above edit/ directory.