TypeError: fetch failed

Answered

Baltimore Oriole posted this in #help-forum

Baltimore OrioleOP

2024-01-28T17:15:40.000Z

getting this error while doing revalidatePath in a server component. I'm adding headers from next/headers in the api request. The response is coming fine for the first time but it's failing on revalidatePath. Need help.
Thanks

Answered by Ray

you shouldn't fetch self api in server component

View full answer

20 Replies

@Baltimore Oriole getting this error while doing revalidatePath in a server component. I'm adding headers from next/headers in the api request. The response is coming fine for the first time but it's failing on revalidatePath. Need help. Thanks

Ray

2024-01-28T17:50:52.000Z

could you show the code?

@Ray could you show the code?

Baltimore OrioleOP

2024-01-28T17:57:09.000Z

export async function GET(request: NextRequest) {
  const session = await getServerSession(authOptions);
  if (!session) {
    return new Response("not logged in");
  }
  const comments = await db.comment.findMany({
    include: {
      user: true,
    },
  });
  return new Response(JSON.stringify(comments));
}

this is the endpoint

async function addComment(formData: FormData) {
    "use server";
    await db.comment.create({
      data: {
        comment: formData.get("comment") as string,
        postedOn: new Date(),
        user: {
          connect: {
            id: "65b2c603bfed17c98012bf4e", // Replace with the actual User ID
          },
        },
      },
    });
    revalidatePath("/dashboard");
  }

  return (
    <>
      <div className="min-h-screen pt-10 px-20">
        <h1>This is DashBoard for {session.user.email}</h1>
        <div>
          <form action={addComment}>
            <input type="text" name="comment" />
            <button type="submit">Submit</button>
          </form>
        </div>
        <CommentList />
      </div>
    </>
  );
}

this is the server component which is importing another server component

import { headers } from "next/headers";

async function getComments() {
  try {
    const res = await fetch("http://localhost:8080/api/posts", {
      method: "GET",
      headers: headers(),
      next: {
        tags: ["comment-data"],
      },
    });
    const comments: {
      id: string;
      comment: string;
      userId: string;
      postedOn: Date;
    }[] = await res.json();
    return comments;
  } catch (e) {
    console.log(e);
  }
}

export default async function CommentList() {
  const comments = await getComments();

  return (
    <div>
      {comments?.map((c) => (
        <li key={c.id}>{c.comment}</li>
      ))}
    </div>
  );
}

this is Comment-List

@Baltimore Oriole `export async function GET(request: NextRequest) { const session = await getServerSession(authOptions); if (!session) { return new Response("not logged in"); } const comments = await db.comment.findMany({ include: { user: true, }, }); return new Response(JSON.stringify(comments)); }` this is the endpoint ` async function addComment(formData: FormData) { "use server"; await db.comment.create({ data: { comment: formData.get("comment") as string, postedOn: new Date(), user: { connect: { id: "65b2c603bfed17c98012bf4e", // Replace with the actual User ID }, }, }, }); revalidatePath("/dashboard"); } return ( <> <div className="min-h-screen pt-10 px-20"> <h1>This is DashBoard for {session.user.email}</h1> <div> <form action={addComment}> <input type="text" name="comment" /> <button type="submit">Submit</button> </form> </div> <CommentList /> </div> </> ); }` this is the server component which is importing another server component `import { headers } from "next/headers"; async function getComments() { try { const res = await fetch("http://localhost:8080/api/posts", { method: "GET", headers: headers(), next: { tags: ["comment-data"], }, }); const comments: { id: string; comment: string; userId: string; postedOn: Date; }[] = await res.json(); return comments; } catch (e) { console.log(e); } } export default async function CommentList() { const comments = await getComments(); return ( <div> {comments?.map((c) => ( <li key={c.id}>{c.comment}</li> ))} </div> ); }` this is Comment-List

Ray

2024-01-28T17:58:59.000Z

what is the endpoing for?

CommentList?

Baltimore OrioleOP

2024-01-28T17:59:23.000Z

yes

Baltimore OrioleOP

2024-01-28T17:59:43.000Z

just updated this