Theo's Typesafe CultTTC
Theo's Typesafe Cult•3y ago•
7 replies
Meierschlumpf

fetch failed with app directory

Hey guys, I'm kind of stuck with drizzle at my first try using the app directory.

I have defined the following db query in my page.tsx:
export default async function Home() {
  const dbSubjects = await db.select().from(subjects);

  return (
    <>
      {dbSubjects.length}
    </>
  );
}


But somehow I always get the error
- error TypeError: fetch failed

Full stack trace:
react-server-dom-webpack-client.browser.development.js:1010 Uncaught TypeError: fetch failed
    at Object.fetch (C:\Dev\sempla\node_modules\next\dist\compiled\undici\index.js:1:26669)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)


Node version: v16.13.0
NextJS: 13.4.7
Screenshot_2023-07-13_214624.png
Solution
Yes!

I found the issue. It was, that somehow the creator of my repository, that I used as template, used @planetscale/database, but I was not using planetscale for my dev environment and so it did not work. This now also makes sense with the port 443, which was actually the tried connection to the database url (which was 127.0.0.1 at this moment) and so it did not find any database, because there was none. Now I've changed to drizzle-orm/mysql2 and I will use @planetscale/database in production
Jump to solution
Was this page helpful?