Currenly trying to create a registry where users can add their products into a registry. I encounter error 404 where the api’s route is not found.
this the script
and here is the api code
import { json } from “@remix-runremix-run/node”;
import db from “../db.server”;
import { cors } from “remix-utils/cors”;
import “dotenv/config”;
// Define the allowed origin for CORS (Shopify domain or fallback to default)
const ALLOWED_ORIGIN = process.env.SHOPIFY_DOMAIN || “https://somethingexample.myshopify.com”;
// Loader for GET requests
export async function loader({ request }) {
try {
// Handle preflight (OPTIONS) requests
if (request.method === “OPTIONS”) {
return new Response(null, {
status: 204,
headers: {
“Access-Control-Allow-Origin”: ALLOWED_ORIGIN,
“Access-Control-Allow-Methods”: “GET, POST, OPTIONS”,
“Access-Control-Allow-Headers”: “Content-Type”,
},
});
}
const url = new URL(request.url);
const customerId = url.searchParams.get(“customerId”);
const productId = url.searchParams.get(“productId”);
const shop = url.searchParams.get(“shop”);
// Log received query parameters for debugging
console.log(“GET Request - Query Parameters:”);
console.log(“Customer ID:”, customerId);
console.log(“Product ID:”, productId);
console.log(“Shop:”, shop);
if (!customerId || !productId || !shop) {
return cors(
request,
json({ message: “Missing required query parameters: customerId, shop, or productId.” }, { status: 400 }),
{ origin: ALLOWED_ORIGIN }
);
}
// Fetch registry details from the database
const registryDetails = await db.registrydetails.findMany({
where: {
customerId,
shop,
productId,
},
});
return cors(
request,
json({ data: registryDetails }),
{ origin: ALLOWED_ORIGIN }
);
} catch (error) {
console.error(“Error in loader (GET):”, error);
return cors(
request,
json({ message: “An error occurred while processing the request.” }, { status: 500 }),
{ origin: ALLOWED_ORIGIN }
);
}
}
// Action for POST, PUT, DELETE requests
export async function action({ request }) {
try {
// Handle preflight (OPTIONS) requests
if (request.method === “OPTIONS”) {
return new Response(null, {
status: 204,
headers: {
“Access-Control-Allow-Origin”: ALLOWED_ORIGIN,
“Access-Control-Allow-Methods”: “GET, POST, OPTIONS, DELETE”,
“Access-Control-Allow-Headers”: “Content-Type”,
},
});
}
// Parse form data
const formData = await request.formData();
const data = Object.fromEntries(formData.entries());
const { customerId, productId, shop, _action } = data;
// Log received form data for debugging
console.log(“POST/DELETE Request - Form Data:”);
for (let [key, value] of formData.entries()) {
console.log(`${key}: ${value}`);
}
// Validate required fields
if (!customerId || !productId || !shop || !_action) {
return cors(
request,
json({ message: “Missing required fields: customerId, productId, shop, or _action.” }, { status: 400 }),
{ origin: ALLOWED_ORIGIN }
);
}
// Handle actions
switch (_action) {
case “CREATE”: {
// Create a new registry entry
const registryDetails = await db.registrydetails.create({
data: { customerId, productId, shop },
});
console.log(“Product successfully added to gift registry:”, registryDetails);
return cors(
request,
json({
message: “Product added to gift registry”,
method: _action,
addedtoGiftRegDetails: true,
}),
{ origin: ALLOWED_ORIGIN }
);
}
case “DELETE”: {
// Delete registry entries matching the request
const deletedCount = await db.registrydetails.deleteMany({
where: {
customerId,
productId,
shop,
},
});
console.log(`Deleted ${deletedCount.count} registry entries for customerId: ${customerId}`);
return cors(
request,
json({
message: “Product removed from gift registry”,
method: _action,
addedtoGiftRegDetails: false,
}),
{ origin: ALLOWED_ORIGIN }
);
}
default: {
// Return unsupported method error
console.warn(“Unsupported action:”, _action);
return cors(
request,
json({ message: “Unsupported action”, method: _action }, { status: 405 }),
{ origin: ALLOWED_ORIGIN }
);
}
}
} catch (error) {
console.error(“Error in action (POST/DELETE):”, error);
return cors(
request,
json({ message: “An error occurred while processing the request.” }, { status: 500 }),
{ origin: ALLOWED_ORIGIN }
);
}
}
the routes point to the correct route.
I would appreciate any help. thank you. I have just started my journey on remix and this is little confusing.