How To Connect to MongoDB in Svelte Kit
ฝัง
- เผยแพร่เมื่อ 15 ต.ค. 2024
- Repo github.com/sto...
Become a Level Up Pro and take your web skills to the next level!
www.leveluptut...
The best web development podcast out there
Syntax with Wes Bos and Scott Tolinski
syntax.fm
🎨 VSCode Theme: marketplace.vi...
All of the stuff I use
www.scotttolin...
Love what you’re doing! This is where we’re hoping to go and we’re encouraged. Tutorial on CRUD please. And can you comment on the difference between a local MongoDB and an Atlas account?
Please do a whole course on Mongodb + sveltekit with CRUD! Also, when using MongoDB Atlas I needed to parse and stringify the db object array in order to use it...
On node > 17 you could use `structuredClone`
Thanks a lot Scott for this video, of course it would be great to create some sort of real world app with SvelteKit + MongoDB, to check project organization, folder structure, where to put business logic, if we need to create a little custom ORM for MongoDB etc, thanks and great work
I would love to see something like this as someone new to sveltekit
ORM - Prisma with DB_URL pointing to MongoDB url
SvelteKit - just see the docs, they’re perfection
Folder structure - see other videos on TH-cam , look at code bases using Sveltekit, and the most obvious - see the examples from SvelteKit
What’s awesome is that this is all web dev. Html, css, JavaScript are all the same in Kit versus nextjs or Nuxt. The syntax changes, but the core ideas stay the same.
I followed the tutorial up to the point of loading the data on the page in +page.svelte, but I get the error "Data returned from `load` while rendering / is not serializable: Cannot stringify arbitrary non-POJOs (data.stuff[0]._id)". This is my data:
{
stuff: [
{ _id: new ObjectId("63529fda94a9579c54c65cc3"), AGE: 30 },
{ _id: new ObjectId("63529fda94a9579c54c65cc4"), AGE: 24 },
{ _id: new ObjectId("63529fda94a9579c54c65cc5"), AGE: 24 }
]
}
To fix it I returned the data from +page.server.ts like this : JSON.parse(JSON.stringify(data)) - Any ideas why it wasn't required in the video?
I would love further tutorials on a full CRUD app with Mongo.
Solid! Would love to see full CRUD tut!
Cheers. This is the first tutorial I've found for integrating Mongo with the latest version of SvelteKit. Much appreciated
I'm 9mins in, and just have to say, so far, I love your blend of `this is how` and `this is why`. Concise explanations in between the coding is perfect. I want to know `why` and not just `how` so I can reapply the concepts elsewhere. Thank you.
EDIT: Your video is the first one to get my mongo connected! Thank you, again.
Let's do this MongoDB series!
Which version of sveltekit you are using? the latest version is having issue to serialize _id while returning tutorials to client side. Not sure why you are not getting the same issue. Anyway excellent tutorial!
Hmm, you're returning a mongo query as toArray(), which returns type WithId[], and stuffing this straight into the return data from a server script. I was doing this just today and sveltekit whines that _id properties aren't serialisable (because they're ObjectId) items (so I had to map and do a .toString() on each _id). I wonder why that's working for you. Curious. I wonder if this is down to the adaptor.
i ran into the same issue,. i solved the problem by modifying the find my projection to be projection: { _id: 0, title: 1 }
Hey Scott! Firstly, thanks for all the time & effort put into the SvelteKit videos, really appreciate it!
Following your video, I'm getting the following error when getting the documents from MongoDB: "Cannot stringify arbitrary non-POJOs". I've narrowed it down and the culprit seems to be the property _id from MongoDB. Somehow, mapping through "data" and returning that into +page.svelte, omitting the _id property, fixes it. Just thought I'd leave this here since a quick search on the interwebs didn't help much :D
I'm running into the same error! Can you expand on "omitting the _id property"? I'm not understanding how to do this. Thanks!
NVM, I used Steve's solution mentioned in the comments below and returned the data with "JSON.parse(JSON.stringify(data))". I'm curious why Scott wasn't getting an error here.
@@c-damocles if you include {_id: 0} in your projection, it tells mongodb not to include the _id property in the return values. Also, the reason he wasn't getting the error is because he's loading the values into the database with his own id strings rather than mongodb's ObjectId, which you can tell by his console.logs at the beginning
@@c-damocles This solved my problem. Thank you!
Since the _id is useful in most cases it might be better to do something like this:
const data = (await tutorials.find({}).toArray()).map(tutorial => ({
...tutorial,
_id: tutorial._id.toString()
}));
This is sweet. On server hook, I believe this should be a use for Sveltekit to provide a "once" function,, just like "handle". Cos there'll be a situation where it'll be necessary to export handle and run something once outside of handle. But I don't know whether the moment you export the handle function, your mongo function (outside of handle) would be able to still run.
I never ever comment on YT. I just wanted to comment and say you're the GOAT for this.
I would appreciate a full MongoDB tutorial, especially within the SvelteKit context 🎉
Hey! Great tutorial. However, both when I follow along and even when i copied your entire repo I get this error for some reason? Cannot stringify arbitrary non-POJOs (data.tutorials[0]._id)
Same here… did you figure it out or switch to mongoose or something?
@@m12652 This solved it for me, duno if there is an easier way..
return JSON.parse(
JSON.stringify({
data: foo })
)
@@kuttarn thanks for that… I switched to Mongoose, haven’t had a chance to fish it off yet as I’m stuck looking at documentation for something else….
Neat! Would love to see the full tutorial with CRUD!
Great work as always and thanks!! Would love more, especially doing db operations that include auth.
Question, super important to me. Why do you not use Mongoose/Typegoose in the example? Is it better to use mongodb with zod and type infer's?
My serverless functions were super slow before this
thanks Scott
Great video - full CRUD would be fantastic
Great video Scott. Love the tips you keep dropping. Zod looks cool as does the trickle down into forms!
For those wondering with the aliasing error: when you add aliases in the sveltekit config you need to then run dev again and it will generate the stuff it needs then. So if he closed the server and ran it again the line would have gone away.
Thank you! You bring happiness to my development Scott :) It even works with prerendering, how awesome is that!
I was requested just one month before to do video on mongo as db and sveltekit as backend and frontend. U started Brother, thanks a ton, please do one complete series on crud and project structure.
20:41 here when copilot recommended return props, it’s because before, if you want to access object from context module (which now is page.server.ts) load function on the svelte file, you need the “props” element on the returned object. Now you dont need it anymore
Please full CRUD tutorial! This was very informative
I'd follow along with a tutorial about building out a web app with svelte and mongoDb. Great video by the way.
Great tut man, 100% would love the full crud tutorial.
good vid, wondering if you have an extension which adds the return type of the function automatically (@ 17:30)?
Thanks for the tutorial Scott! A CRUD tutorial would be dope! Also tut on using the latest and greatest for windmill to halo too please 😇
Full CRUD tutorial, and maybe cover why you like MongoDB vs something like Postgres or MySQL
Great stuff… but I get the following error running your repo: “cannot stringify non-polos” when trying to grab a collection
Hello, Can we use mongoose or Prisma with Mongo DB? Do you have any plan to make a video on Prisma + mongodb?
superb clarity, and an enjoyable learning experience! can you tell me if TypeScript is the way to go over normal JS files?
Would love to see a full sveltekit course now they have a release version
Great tutorial. But one nitpick would be that the vs code theme that you use doesn't show some code properly in the dark mode. Eg. Import statement
What do you mean “properly” ?
@@syntaxfm meaning its contrast is very low and that makes it hard to read stuff
I believe I've officially broken my brain on the .env variable. I've got the .env file in the root folder, and have the import statement as you mentioned, and get an error that $env/static/private has no exported member as listed. I've read the docs, but don't understand them, I guess. edit: I tried npm run dev and it worked. I'll just assume the squiggly line is there until I do that. I tried it so many dang times!
Another great Scott video and anyone who doesnt think so can zip it! lol Looking forward to a full-on crud tut with mongodb and how about supabase?
What is the font and colorscheme that you are using?
Thanks a Lot! :) News on updating svelte's tuts @ level up?
Love all your tutorials on svelte and kit, are you going to use mongoose in future to this project.?
Please more about zod and schema validation/generation/magic!
Hello, the tutorial has been very interesting, but you could do something similar for the login process with mongodb. I have seen that you already did it with another database. But it gives me problems to do with mongodb and from what I've seen on SOF also many other people starting with sveltekit.
Super interested in using Zod and just write 1 schema with mongo. i was using typegoose
I think we need a tutorial how to modify this data, because I have problems with the env variables when I use the db functionality inside the +page.svelte file
Can do!
Please teach us how to use Zod or Mongoose for schemas?
I'm using mongoose with sveltekit in a small personal project to help with schemas etc
How is it? I’m thinking to do the same as this method just raises errors for me.
Been trying to contact him to explain us how to do the mongodb validation schema based on zod but he never replyed, instead i used chatGPT to make the function, if anyone needs it let me know
CRUD app using Prisma!!! Or Supabase. Maybe Auth too!
My hair is wild in this video. 😅
hmm...a dev who cares about is appearance is good thing...i guess...but would prefer your comments as to why this we are seeing this error when returning data out of load() "Data returned from `load` while rendering / is not serializable: Cannot stringify arbitrary non-POJOs (data.stuff[0]._id)"
@@papyrusrex7180 My appologies, wasn't seeing the comments on this video, but long story short the POJO thing will pop up in SK anytime you return non-serializable data types. You can read more about it here: www.okupter.com/blog/sveltekit-cannot-stringify-arbitrary-non-pojos-error
In your tutorial you use db/utilities with the functions: update_schema, update_index.
Can you share those files in order to do a "MongoDB validation Schema" with zod
Will subscribe and pay!
Hi. great work! What is this plugin for suggesting the code, e.g. in the th-cam.com/video/gwktlvFHLMA/w-d-xo.html
pleease make a CRUD tutorial bro 😭
4:40 my computer also lol
Waiting for crud MongoDB+ SvelteKit 😢
FUCKING TYPESCRIPT
request sveltekit + mysql. tq
just use sequelize
Personally I’d love a soup to nuts sveltekit supabase. Like a cool dashboard with with auth and user levels and such