Next.js Discord

Discord Forum

TypeError: fetch failed

Answered
Yellowstripe scad posted this in #help-forum
Open in Discord
Avatar
Yellowstripe scadOP
TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11730:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  cause: ConnectTimeoutError: Connect Timeout Error
      at onConnectTimeout (node:internal/deps/undici/undici:6869:28)
      at node:internal/deps/undici/undici:6825:50
      at Immediate._onImmediate (node:internal/deps/undici/undici:6855:37)
      at process.processImmediate (node:internal/timers:478:21)
      at process.callbackTrampoline (node:internal/async_hooks:130:17) {
    code: 'UND_ERR_CONNECT_TIMEOUT'
  }
}

no idea what this is from or why.
using nextjs, typescript, prisma (postgres)

this only happens in dev environment

import Loading from "@/components/Loading"
import SwitchCard from "@/components/Switch"
import { Input } from "@/components/ui/input"
import { db } from "@/lib/db"
import { Suspense } from "react";

async function fetchData() {
    let switchData;
    try {
        switchData = await db.switch.findMany({
            take: 10,
            include: {
                images: true,
                prices: true
            }
        })
    } catch (error) {
        console.log(error)
    }
    return (
        <div className="mx-auto min-h-[calc(100vh-4rem)] w-full max-w-screen-2xl px-6 py-16 md:px-20">
            <Input type="text" placeholder="Search" className="w-full h-12"/>
            <div className="rounded-lg py-3 grid md:grid-cols-2 gap-2 lg:grid-cols-3 xl:grid-cols-4">
                {switchData && switchData.length > 0 ? switchData.map((switchItem: any, index: any) => (
                    <SwitchCard key={index} switchData={switchItem} />
                )) : <p>No switches found</p>}
            </div>
        </div>
    )
}

export default function Home() {
    return (
        <Suspense fallback={<Loading />}>
            {fetchData()}
        </Suspense>
    )
}
Answered by Noronha
Try: FetchData()

And <FetchData />
View full answer

7 Replies

Avatar
Noronha
Can you try it like this:
Avatar
Yellowstripe scadOP
Image
idk why im getting tis problem
Avatar
Noronha
You components must start with a capital letter
Avatar
Noronha
Try: FetchData()

And <FetchData />
Answer
Avatar
Yellowstripe scadOP
🙏