Theo's Typesafe Cult•2y ago

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}
    </>
  );
}

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)

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

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

5 Replies

MeierschlumpfOP•2y ago

Okay it seems like the normal fetch call is working

MeierschlumpfOP•2y ago

MeierschlumpfOP•2y ago

My database url is: mysql://username:password@localhost/dbname, that should be right? So I moved my db query to an api route and now i get a little more info to the issue:

- error 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) {
  cause: Error: connect ECONNREFUSED 127.0.0.1:443
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1161:16)
      at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
    errno: -4078,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '127.0.0.1',
    port: 443
  }
}

- error 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) {
  cause: Error: connect ECONNREFUSED 127.0.0.1:443
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1161:16)
      at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
    errno: -4078,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '127.0.0.1',
    port: 443
  }
}

Solution

Meierschlumpf•2y ago

shikishikichangchang•9mo ago

Gaming

Programming

fetch failed with app directory