11 replies

fetchQuery: TypeError: fetch failed For a fresh Next.js X Convex Project

🪲Bug Report❔Advice✅Resolved

Hello I am getting this error when I am trying to run a fetchQueryfetchQuery on a next.js server component

typescript 
//page.tsx
import { api } from "@/convex/_generated/api";
import { fetchQuery } from "convex/nextjs";

export default async function Home() {
  const numbers = await fetchQuery(api.myFunctions.listNumbers, {
    count: 3,
  });
  console.log("Numbers from server:", numbers);
  return (
    <>
      <header className="sticky top-0 z-10 bg-background p-4 border-b-2 border-slate-200 dark:border-slate-800 flex flex-row justify-between items-center">
        Convex + Next.js
      </header>
      <main className="p-8 flex flex-col gap-16">
        <h1 className="text-4xl font-bold text-center">Convex + Next.js</h1>
      </main>
    </>
  );
}

typescript 
//page.tsx
import { api } from "@/convex/_generated/api";
import { fetchQuery } from "convex/nextjs";

export default async function Home() {
  const numbers = await fetchQuery(api.myFunctions.listNumbers, {
    count: 3,
  });
  console.log("Numbers from server:", numbers);
  return (
    <>
      <header className="sticky top-0 z-10 bg-background p-4 border-b-2 border-slate-200 dark:border-slate-800 flex flex-row justify-between items-center">
        Convex + Next.js
      </header>
      <main className="p-8 flex flex-col gap-16">
        <h1 className="text-4xl font-bold text-center">Convex + Next.js</h1>
      </main>
    </>
  );
}

And on the convex side the default list function

and I am getting this on the console

 GET /.well-known/appspecific/com.chrome.devtools.json 404 in 23ms
 ⨯ TypeError: fetch failed
    at async Home (app/page.tsx:5:18)
  3 |
  4 | export default async function Home() {
> 5 |   const numbers = await fetchQuery(api.myFunctions.listNumbers, {
    |                  ^
  6 |     count: 3,
  7 |   });
  8 |   console.log("Numbers from server:", numbers); {
  digest: '3204391019',
  [cause]: [AggregateError: ] { code: 'ETIMEDOUT' }
}
 GET / 500 in 874ms

 GET /.well-known/appspecific/com.chrome.devtools.json 404 in 23ms
 ⨯ TypeError: fetch failed
    at async Home (app/page.tsx:5:18)
  3 |
  4 | export default async function Home() {
> 5 |   const numbers = await fetchQuery(api.myFunctions.listNumbers, {
    |                  ^
  6 |     count: 3,
  7 |   });
  8 |   console.log("Numbers from server:", numbers); {
  digest: '3204391019',
  [cause]: [AggregateError: ] { code: 'ETIMEDOUT' }
}
 GET / 500 in 874ms

Any idea what might be a reason? Any suggestions are welcome

Convex Community•7mo ago•

11 replies

fuadnafiz98

fetchQuery: TypeError: fetch failed For a fresh Next.js X Convex Project

🪲Bug Report❔Advice✅Resolved

Hello I am getting this error when I am trying to run a fetchQueryfetchQuery on a next.js server component

typescript 
//page.tsx
import { api } from "@/convex/_generated/api";
import { fetchQuery } from "convex/nextjs";

export default async function Home() {
  const numbers = await fetchQuery(api.myFunctions.listNumbers, {
    count: 3,
  });
  console.log("Numbers from server:", numbers);
  return (
    <>
      <header className="sticky top-0 z-10 bg-background p-4 border-b-2 border-slate-200 dark:border-slate-800 flex flex-row justify-between items-center">
        Convex + Next.js
      </header>
      <main className="p-8 flex flex-col gap-16">
        <h1 className="text-4xl font-bold text-center">Convex + Next.js</h1>
      </main>
    </>
  );
}

typescript 
//page.tsx
import { api } from "@/convex/_generated/api";
import { fetchQuery } from "convex/nextjs";

export default async function Home() {
  const numbers = await fetchQuery(api.myFunctions.listNumbers, {
    count: 3,
  });
  console.log("Numbers from server:", numbers);
  return (
    <>
      <header className="sticky top-0 z-10 bg-background p-4 border-b-2 border-slate-200 dark:border-slate-800 flex flex-row justify-between items-center">
        Convex + Next.js
      </header>
      <main className="p-8 flex flex-col gap-16">
        <h1 className="text-4xl font-bold text-center">Convex + Next.js</h1>
      </main>
    </>
  );
}

And on the convex side the default list function

and I am getting this on the console

 GET /.well-known/appspecific/com.chrome.devtools.json 404 in 23ms
 ⨯ TypeError: fetch failed
    at async Home (app/page.tsx:5:18)
  3 |
  4 | export default async function Home() {
> 5 |   const numbers = await fetchQuery(api.myFunctions.listNumbers, {
    |                  ^
  6 |     count: 3,
  7 |   });
  8 |   console.log("Numbers from server:", numbers); {
  digest: '3204391019',
  [cause]: [AggregateError: ] { code: 'ETIMEDOUT' }
}
 GET / 500 in 874ms

 GET /.well-known/appspecific/com.chrome.devtools.json 404 in 23ms
 ⨯ TypeError: fetch failed
    at async Home (app/page.tsx:5:18)
  3 |
  4 | export default async function Home() {
> 5 |   const numbers = await fetchQuery(api.myFunctions.listNumbers, {
    |                  ^
  6 |     count: 3,
  7 |   });
  8 |   console.log("Numbers from server:", numbers); {
  digest: '3204391019',
  [cause]: [AggregateError: ] { code: 'ETIMEDOUT' }
}
 GET / 500 in 874ms

Any idea what might be a reason? Any suggestions are welcome

Continue the conversation

Join the Discord to ask follow-up questions and connect with the community

Convex Community

Join the Convex Discord! Explore Convex, the backend platform that keeps your app in sync.

15,892 Members

Join

fetchQuery: TypeError: fetch failed For a fresh *Next.js* X *Convex* Project

fetchQuery: TypeError: fetch failed For a fresh *Next.js* X *Convex* Project

Continue the conversation

Convex Community

Continue the conversation

Convex Community

Similar Threads

fetchQuery: TypeError: fetch failed For a fresh Next.js X Convex Project

fetchQuery: TypeError: fetch failed For a fresh Next.js X Convex Project