Encountering an error when trying to post data to the Posts model upon clicking the post button:
Internal error: MongooseError: Operation posts.insertOne() buffering timed out after 10000ms
My setup includes a local MongoDB and Next.js 14 with app router. I've also attempted using { useNewUrlParser: true, useUnifiedTopology: true } but it didn't resolve the issue.
Below is the code snippet :
mongodb.js
import mongoose from "mongoose";
const connect = async () => {
if (mongoose.connections[0].readyState) return;
try {
await mongoose.connect(process.env.MONGODB_URI);
mongoose.Promise = global.Promise;
console.log("Mongo Connection successfully established.");
} catch (error) {
throw new Error("Error connecting to Mongoose");
} finally {
await mongoose.connection.close();
}
};
export default connect;
AddPost.js
import mongoose from 'mongoose';
const addNewPostSchema = new mongoose.Schema({
uid: {
type: String,
required: true,
},
title: {
type: String,
},
content: {
type: String,
},
author: {
type: String,
required: true,
},
}, { timestamps: true });
export default mongoose.models.Posts || mongoose.model("Posts", addNewPostSchema);
addpost/page.js
'use client'
import { saveData } from "./managePostData"
export default function CreatePost() {
const handleFormSubmit = async (e) => {
e.preventDefault()
const title = e.target[0].value
const content = e.target[1].value
const author = e.target[2].value
let res = saveData(title, content, author)
}
return (
<form className="text-gray-400 bg-gray-900 body-font my-12" onSubmit={handleFormSubmit}>
<div className="py-6 bg-gray-800 bg-opacity-50 rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0">
<h2 className="text-white text-lg font-medium title-font mb-5 text-center">New Post</h2>
<div className="relative mb-4">
<label htmlFor="post-topic" className="leading-7 text-sm text-gray-400">Topic</label>
<input type="text" id="post-topic" name="post-topic" className="w-full bg-gray-600 bg-opacity-20 focus:bg-transparent focus:ring-2 focus:ring-indigo-900 rounded border border-gray-600 focus:border-indigo-500 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out" />
</div>
<div className="relative mb-4">
<label htmlFor="post-description" className="leading-7 text-sm text-gray-400">Description</label>
<textarea id="post-description" name="post-description" className="w-full bg-gray-600 bg-opacity-20 focus:bg-transparent focus:ring-2 focus:ring-indigo-900 rounded border border-gray-600 focus:border-indigo-500 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out" />
</div>
<div className="relative mb-4">
<label htmlFor="post-author" className="leading-7 text-sm text-gray-400">Author</label>
<input type="text" id="post-author" name="post-author" className="w-full bg-gray-600 bg-opacity-20 focus:bg-transparent focus:ring-2 focus:ring-indigo-900 rounded border border-gray-600 focus:border-indigo-500 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out" />
</div>
<button type="submit" className="text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg">Post</button>
</div>
</form>
);
}
addpost/managepostdata.js
'use server'
// import connect from "@/app/lib/mongodb";
import AddPostModel from "@/app/models/AddPost";
const saveData = async (title, content, author) => {
let newaddpostobj = new AddPostModel({
uid: Date.now().toString(36),
title: title,
content: content,
author: author,
})
let res = await newaddpostobj.save()
return res.id.toString()
}
const getData = async () => {
let res = await AddPostModel.find()
// console.log(JSON.parse(JSON.stringify(res)))
return JSON.stringify(res)
}
export { saveData, getData }