Is this an API route? I was told that this is not an API Route
Unanswered
Jenn posted this in #help-forum
JennOP
To be exact: I received a
I am calling it like this:
404 Not Found" responseimport { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
import { NextApiRequest, NextApiResponse } from "next";
import { cookies } from "next/headers";
export default async function deleteWaterType(req: NextApiRequest, res: NextApiResponse) {
if (req.method === "DELETE") {
const { water_id } = req.body as { water_id: number }; // You can pass the water_id in the request body
try {
// Use the water_id to specify which record to delete
const supabase = createServerComponentClient({ cookies });
const { data, error } = await supabase
.from("water_type") // Replace with your table name
.delete()
.eq("id", Number(water_id));
if (error) {
return res.status(500).json({ error: "Error deleting record" });
}
console.log("Response data:", data); // Changed "res" to "data" to log the correct variable
return res.status(200).json({ message: "Record deleted successfully" });
} catch (error) {
return res.status(500).json({ error: "Error deleting record" });
}
} else {
return res.status(405).json({ error: "Method not allowed" });
}
}I am calling it like this:
try {
const response = await fetch("/auth/actions/waterTypes/deleteWaterType", {
method: "DELETE",
body: JSON.stringify({ water_id }),
headers: {
"Content-Type": "application/json",
},
});
console.log(response,"response")
if (response.status === 200) {
console.log(`Deleted record with ID: ${water_id}`);
setErrorMessage(null);
} else {
const errorResponse = await response.json();
setErrorMessage(errorResponse.error);
}
toggleClose();
} catch (error) {
console.error("Error deleting record:", error);
setErrorMessage("An error occurred while deleting the record.");
}
};29 Replies
JennOP
your filename isn't
route.ts, so follow the docs: https://nextjs.org/docs/app/building-your-application/routing/route-handlersJennOP
oh okay, I was actually using another thing like this
'use server'
import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
import { revalidatePath } from "next/cache";
import { cookies } from "next/headers"
export async function addWaterType(formData: FormData) {
try {
const name = formData.get('name')
const price = formData.get('price')
const supabase = createServerComponentClient({ cookies })
await supabase.from('water_type').insert({name, price}).select()
revalidatePath('/waterTypes')
return { message: 'Success!' }
} catch (e) {
return { message: 'There was an error.' }
}
} but this was workin. I did not follow the filename wih a route.tsyeah server actions also work
JennOP
I can also just mix it all up, like I can user server actions for the create and edit, and then an API for the delete?
server actions always use post...
JennOP
Are there any errors on my code or is it just the file routing?
@Jenn Are there any errors on my code or is it just the file routing?
i haven't looked that much at your code, but do you have errors? (looks good enough from basic look)
JennOP
yeah, it still says
DELETE http://localhost:3000/waterTypes/api/route.ts 404 (Not Found) and Error deleting record: SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSONi meant your file be in
route.ts, but the actual url what the folder pathname wasnow you should beable to use
DELETE /waterTypesJennOP
Still getting the sam error
wait i forgot about the /api
i mean this is what you use:
DELETE /waterTypes/apiJennOP
The sam error still shows. I can see this on the terminal
Detected default export and No HTTP methods exportedohh i should have seen that too, you just export it (no default)
export async function DELETE(and you return the result like: https://nextjs.org/docs/app/building-your-application/routing/route-handlers#behavior
The response is still 404
uhh you arn't doing the return properly still
also show which url you are using and your code's filename (+make sure you are using delete)
and the check of method being delete is useless
ohh you didn't understand how i meant to fetch
i meant method in that (it is a common way of saying method and url): https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#supplying_request_options
JennOP
Thanks. I'll have to check this out as well