After deploying my next js site using Vercel, I encountered an issue with the functionality related to adding, getting, editing, and deleting data from MongoDB. Although all functions were working perfectly locally, once deployed, I noticed that while I could still perform these actions on the database, the browser was only displaying old data that was added before deployment, failing to show any new data.
Despite seeing the changes reflected in the database itself, the updates were not being displayed on the screen. What could possibly be causing this discrepancy?
const [allProjects, setAllProjects] = useState([]);
// fetch all projects
useEffect(() => {
const fetchProjects = async () => {
const res = await fetch("/api/project", {
cache: "no-cache",
headers: {
"Cache-Control": "no-cache",
},
});
const data = await res.json();
setAllProjects(data);
};
fetchProjects();
}, []);
console.log("allProjects: ", allProjects);
This is the API route:
/api/project/route.ts
export const GET = async (req) => {
try {
await connectToDB();
const projectSchema = await Projects.find({}).populate("_id");
return new Response(JSON.stringify(projectSchema), { status: 201 });
} catch (error) {
new Response("Failed to fetch Project", { status: 500 });
}
};