sending fetch request to GET route handler

Unanswered

Spectacled Caiman posted this in #help-forum

Spectacled CaimanOP

2023-06-21T18:39:38.000Z

I feel like i'm probably sending the fetch request incorrectly but I can't seem to get the route handler to be called.

app/api/getThing/route.ts

export async function GET(req: Request) {
  console.log("hitting endpoint", req);
  await fetch("https://jsonplaceholder.typicode.com/todos/1");
  return new Response(JSON.stringify({ message: "Hello World!" }));
}

app/test/page.tsx

export default async function Page() {
  const res = await fetch("http://localhost:3000/api/getThing", {
    method: "GET",
  });

  return <pre>{JSON.stringify(await res.json(), null, 2)}</pre>;
}

it returns null data and I don't see any console logs.

24 Replies

Giant panda

2023-06-21T18:43:04.000Z

Can you hit the endpoint when using tools like Postman, curl or your browser directly?

Also, don't call your own route handlers from server-side code, that won't work most of the time anyways.

Spectacled CaimanOP

2023-06-21T18:43:43.000Z

I can hit it with postman and browser directly

maybe it's the server-side thing

why wouldn't that work?

Giant panda

2023-06-21T18:45:29.000Z

I can't say for sure what's causing this particular issue, but it's discouraged anyways so it kinda of is a "non-issue" in the end anyways.

Spectacled CaimanOP

2023-06-21T18:45:41.000Z

the whole point im doing this is because of this other problem I'm facing where I have this one page that calls drizzle db.select... and if you navigate back/forth from that page and go back, the select doesn't retrigger. I tried all of the revalidation options in https://nextjs.org/docs/app/building-your-application/data-fetching/revalidating but none worked, so i thought maybe if i put the db select in a route handler and then send a fetch request i can use the no caching option there.

Giant panda

2023-06-21T18:48:24.000Z

With back and forth you mean the browser implementation of back/forward or just usual navigation that shows the data is statically cached?

Spectacled CaimanOP

2023-06-21T18:48:49.000Z

browser

Giant panda

2023-06-21T18:50:07.000Z

Yeah I never looked into that behavior specifically so I can't help you with that. However your attempted solution is not going to work regardless, that's what I can guarantee you.

Spectacled CaimanOP

2023-06-21T18:50:19.000Z

yeahhh

anyways thanks for the help

@Spectacled Caiman I feel like i'm probably sending the fetch request incorrectly but I can't seem to get the route handler to be called. `app/api/getThing/route.ts` tsx export async function GET(req: Request) { console.log("hitting endpoint", req); await fetch("https://jsonplaceholder.typicode.com/todos/1"); return new Response(JSON.stringify({ message: "Hello World!" })); } `app/test/page.tsx` tsx export default async function Page() { const res = await fetch("http://localhost:3000/api/getThing", { method: "GET", }); return <pre>{JSON.stringify(await res.json(), null, 2)}</pre>; } it returns null data and I don't see any console logs.

joulev

2023-06-22T02:56:09.000Z