3 replies

NextJS recursively call API route.ts from API route.ts

I have Site, Place, and Element in my database using Planetscale.

Sites are the root, they can have Places and Elements.
Places can also have Places and Elements.
Elements are final.

The API that deletes Sites would call the API to delete Places if any, in the current Site, and call the API to delete Elements would do the same.

The Place delete API would check if there are sub-Places, and call the API for all of them, same as for Elements.

So, calling the delete API on a Site would delete all of its Places and Elements.
Calling the API on a Place do the same

Is this doable? or should I try something else?

I am getting issues with authentication when I try to fetch those APIs inside an API.

Delete functions that call the APIs:

async function deletePlace(place: Place) {
  try {
    await fetch(`${APP_URL}/api/locais/${place.id}`, {
      method: "DELETE",
      headers: {
        "Content-Type": "application/json",
      },
    });
    console.log(`Deleted place with ID ${place.id}`);
  } catch (error) {
    console.error(error);
  }
}

async function deletePlace(place: Place) {
  try {
    await fetch(`${APP_URL}/api/locais/${place.id}`, {
      method: "DELETE",
      headers: {
        "Content-Type": "application/json",
      },
    });
    console.log(`Deleted place with ID ${place.id}`);
  } catch (error) {
    console.error(error);
  }
}

Part of the api that deletes (try) every Place/Element:

...
  let places;
  try {
    query = await conn.execute("SELECT * FROM Place WHERE site_id = ?", [
      body.data.id,
    ]);
    places = query.rows as Place[];
  } catch (e) {
    console.log(e);
    return ErrorResponse(...);
  }
  if (places.length > 0) {
    const r = await Promise.all(
      places.map((place) => deletePlace(place))
    );
    console.log(r);
  }

...
  let places;
  try {
    query = await conn.execute("SELECT * FROM Place WHERE site_id = ?", [
      body.data.id,
    ]);
    places = query.rows as Place[];
  } catch (e) {
    console.log(e);
    return ErrorResponse(...);
  }
  if (places.length > 0) {
    const r = await Promise.all(
      places.map((place) => deletePlace(place))
    );
    console.log(r);
  }

What happens when I call these APIs is that I am unauthenticated:

  const session = await getServerSession(authOptions);
  if (!session) {
    console.log("unauthenticated?");
    return ErrorResponse(...);

  const session = await getServerSession(authOptions);
  if (!session) {
    console.log("unauthenticated?");
    return ErrorResponse(...);

Terminal from when I run it:

unauthenticated?
Deleted place with ID 86
[ undefined ]
-  ┌ DELETE /api/obras/46 200 in 1184ms
   └──── DELETE http://localhost:3000/api/locais/86 403 in 310ms (cache: MISS)

unauthenticated?
Deleted place with ID 86
[ undefined ]
-  ┌ DELETE /api/obras/46 200 in 1184ms
   └──── DELETE http://localhost:3000/api/locais/86 403 in 310ms (cache: MISS)

I hope you can point me in the right direction. Thx

Solution

lmao this was dumb, I can make external function and import them wherever I need.

I made a delete.ts file where:
deleteElement deletes all related to the element, including stuff from supabase storage.

deletePlace deletes the place and its places and its elements, by calling itself and deleteElement.

deleteSite does the same.

Jump to solution

NextJS recursively call API route.ts from API route.ts

async function deletePlace(place: Place) {
  try {
    await fetch(`${APP_URL}/api/locais/${place.id}`, {
      method: "DELETE",
      headers: {
        "Content-Type": "application/json",
      },
    });
    console.log(`Deleted place with ID ${place.id}`);
  } catch (error) {
    console.error(error);
  }
}

async function deletePlace(place: Place) {
  try {
    await fetch(`${APP_URL}/api/locais/${place.id}`, {
      method: "DELETE",
      headers: {
        "Content-Type": "application/json",
      },
    });
    console.log(`Deleted place with ID ${place.id}`);
  } catch (error) {
    console.error(error);
  }
}

Part of the api that deletes (try) every Place/Element:

...
  let places;
  try {
    query = await conn.execute("SELECT * FROM Place WHERE site_id = ?", [
      body.data.id,
    ]);
    places = query.rows as Place[];
  } catch (e) {
    console.log(e);
    return ErrorResponse(...);
  }
  if (places.length > 0) {
    const r = await Promise.all(
      places.map((place) => deletePlace(place))
    );
    console.log(r);
  }

...
  let places;
  try {
    query = await conn.execute("SELECT * FROM Place WHERE site_id = ?", [
      body.data.id,
    ]);
    places = query.rows as Place[];
  } catch (e) {
    console.log(e);
    return ErrorResponse(...);
  }
  if (places.length > 0) {
    const r = await Promise.all(
      places.map((place) => deletePlace(place))
    );
    console.log(r);
  }

What happens when I call these APIs is that I am unauthenticated:

  const session = await getServerSession(authOptions);
  if (!session) {
    console.log("unauthenticated?");
    return ErrorResponse(...);

  const session = await getServerSession(authOptions);
  if (!session) {
    console.log("unauthenticated?");
    return ErrorResponse(...);

Terminal from when I run it:

unauthenticated?
Deleted place with ID 86
[ undefined ]
-  ┌ DELETE /api/obras/46 200 in 1184ms
   └──── DELETE http://localhost:3000/api/locais/86 403 in 310ms (cache: MISS)

unauthenticated?
Deleted place with ID 86
[ undefined ]
-  ┌ DELETE /api/obras/46 200 in 1184ms
   └──── DELETE http://localhost:3000/api/locais/86 403 in 310ms (cache: MISS)

I hope you can point me in the right direction. Thx

Solution

Jump to solution

NextJS recursively call API route.ts from API route.ts

NextJS recursively call API route.ts from API route.ts

Similar Threads

Similar Threads

Similar Threads