#16 Adding Events | Build a Complete App with GraphQL, Node.js, MongoDB and React.js
ฝัง
- เผยแพร่เมื่อ 9 ก.พ. 2025
- In the last video we added the modal which we'll use to add events - time to create events with the help of our GraphQL backend API!
----------
Node.js full course (includes GraphQL): acad.link/nodejs
React.js full course: acad.link/reactjs
MongoDB full course: acad.link/mongodb
Finished Code: github.com/aca...
Complete Playlist: academind.com/...
Want to learn something totally different? Check out all other courses: academind.com/...
----------
• You can follow Max on Twitter (@maxedapps).
• And you should of course also follow @academind_real.
• You can also find us on Facebook.( / academindchannel )
• Or visit our Website (www.academind.com) and subscribe to our newsletter!
See you in the videos!
----------
Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice! - วิทยาศาสตร์และเทคโนโลยี
Exected type Float! but got 70.90. If you get this error make sure to remove quotes for price in your createEvent String.
Should look like this: createEvent(eventInput:{title:"${title}", description:"${description}", price:${price}})
Hope it helps!
Greate. Thank you a lot!
@@Gorr1995 You're welcome, glad I could help
thanks man!
Excellent as always, Max!
The context variable and the ref in React did worth a lot for me.
That's really great to read Murillo, thank you very much for your comment!
I really appreciate you making these TH-cam series videos. The content here is exactly what I needed to get started with Graphql! (I'm also watching your MongoDB Udemy course, which is also very good.) Thank you Max.
Thanks a lot Michael! Happy to read that you like the content here and on Udemy :)
these series are just absolutely astonishing. huge thanks!
Thanks a lot for this amazing feedback Giedrius!
Excellent. Using a Reference in that context made my day. Very good example. Thanks Max!
Awesome to read that you liked it Andreas, thank you!
Awesome man. Graph ql is super sweet
excellent video series, like always! Congrats for being share your knowledge with us in this so clear way! I'll be waiting for the next vídeos!
Thank you very much for your support Maike! The next video will be released tomorrow :)
can you teach us how to do the token refresh part??
what if the token expires??
What would be a better way of updating the events list when a new event is created other than refetching all events. (maybe append the event to the state?)
anyone getting a POST localhost:8000/graphql 500 (Internal Server Error) error when trying to create events?
I get the same error, how did you fix it ?
Did u fix it?
I had this error too, deleted all events in the database then created some and it worked fine!
My favourite episode so far, thank you!
Do you think that calling function to fetch all events in a .next() function of adding a new one is the best option to load all events? Considering that it does not have any calculations or anything else on the back end, wouldn't it be easier to add locally that newly added event to the state that contains array of all events from the fetch method? When we add new event, as a response from the server we already have that one that we add. What is the best practice here?
Love from Newbie to GraphQL. The series is awesome. Will you do a course on how to combine React and Node
Thanks Balaji! A MERN course is definitely interesting, but I will not create one in the near future, sorry.
@@academind You have haha .. Just coming by after you created a Udemy as well as a crash course here ... Time heals everything lol
When I try to send request being logged in, the request is always "pending", it looks like it can't even reach the createevents, anyone had this issue?
I don't understand why the token is in the context and not in a localStorage
how do you prevent logout on refresh?
Hi Max i am still new to grapqhl and i have been following your tutorial but i am struggling inthe createEvents method in the back end it keep saying to me not authenticated but i did exactly as you did
createEvent: async (args, req) => {
if (!req.isAuth) {
throw new Error("unAuthenticated");
}
may it be that the req is null or something?
I had the same problem as you (I was using functional component with useContext()).
instead of :
const token = context.token;
I had to use
const token = context.token.token;
The bug is on my part when I set the token in a state like so : setUserToken({token}); // 'token' being the name of the login() function's parameter
instead of : setUserToken(token);
Use your browser and IDE debugger and it'll be easy-ish to spot what's the error :)
Cheers mate
I was missing the jwt import on isAuth. Hours to figure it out!
One other thought - I can see the #views is tailing off from the #1 on the playlist. Hope you keep building these. Know you need the viewers/audience to keep going. I think with these long series only a core group sticks it out and thus you have to wonder what would get someone new to jump in mid-stream? My suggestion - make one of the next videos in the series a “theory” video similar to how you worked the CSS class. Perhaps introduce a more advanced topic like Subscriptions or Facebook/Google API authentication and with one video just go back to the PowerPoint to talk through theory/how it works/design options/technology choices/etc. That way you’ll attract the folks searching Google/TH-cam for help...
just a question, ref solution is more efficient than state? because we write a bit more line with ref (ex with state onChange is short this.setState({...this.state, [el.name]: el.value}); )
when you add for price and set the type="number", for me, it only accepts the integer (whole numbers). I am confused!
HI. I watched a video the other day that suggested ordering the fields in your CSS to speed up rendering a tiny bit.
while making the fetch call from react my Bearer keyword gets trimmed which further breaks on the server due to that logic. Its working fine with Postman though
I noticed that if I try to add an event with just the date and no time, it does not add the event.
Great video. I have used Apollo instead. Cleaner and easier :)
any git repo please to see how you've done it with Apollo ?
Max, will you later solve problem with logout after refresh?
I absolutely love this series! I've been trying to figure out the 500 Internal Server Error and the 400 Bad request error I keep getting for creating events. Could someone guide me as to how I could possibly solve this issue?
@Academind pls i need help im stuck i cant create the events for some reason!
Hi Max!
When I fetch _id of creator I've got an error "ID cannot represent value: { _bsontype: "ObjectID", id: }" . Do you know why? _id for event works fine.
SOLUTION updating graphql package to 14.1.1! ;)
Thank you!
Can someone help me with the hooks version of this tutorial part ?? Please
I'm working on it using hooks
Thanks Max!!,
Thank YOU for your support Kamau!
Will there be graphql course on Udemy?
No plans to create one in the near future. We cover GraphQL in this series and my Node Complete Guide also contains a module on it.
Hi. Thanks for the course. What font do you use?
Okay then, guess who just lost a customer. Good job. I don't want to know what would happen if I had more important question.
lol plz leave k thx.
What about Mern stack course on udemy
It's an interesting topic, but I do not plan to create a MERN course in the near future. This can always change though.
If anyone is watching and has an issue with createEvent returning creator with this error " Cannot read properties of null (reading '_doc')" , it's because on the resolver logic userId: req.userId is not working and I'm not sure where and how he set it up, but I had to add it in requestBody after query from the state, and access it on resolver with req.body.userId
I still don't get it where to fix it, can you post a little code sample from the requestBody ? thank you
@@anutaNYC
createEvent: (args, req) => {
if (!req.isAuth) {
throw new Error('Unauthorized');
}
const event = new Event({
title: args.eventInput.title,
description: args.eventInput.description,
price: +args.eventInput.price,
date: new Date(args.eventInput.date),
creator: req.body.userId
});
let createdEvent;
return event
.save()
.then(result => {
createdEvent = transformEvent(result);
return User.findById(req.body.userId)
})
.then(user => {
if (!user) {
throw new Error('User not found')
}
user.createdEvents.push(event);
return user.save();
}).then(result => {
return createdEvent;
})
.catch(err => {
throw err;
});
return event;
}
@@anutaNYC Should be this one, it was long time ago, but I see that that's the method for creating an event
@@SRBjastuk I’ll try it!! Thank you! Couldn’t figure out why it wasn’t finding the user
@@SRBjastuk still something is off but thank you
Hi Max i am still new to grapqhl and i have been following your tutorial but i am struggling inthe createEvents method in the back end it keep saying to me not authenticated but i did exactly as you did
createEvent: async (args, req) => {
if (!req.isAuth) {
throw new Error("unAuthenticated");
}
may it be that the req is null or something?
Make sure that in resolvers/auth.js and middleware/isauth.js the token key ("somesupersecretkey" in this example) match each other exactly! I had this issue too, and thats what the problem was for me.
I had the same problem as you (I was using functional component with useContext()).
instead of :
const token = context.token;
I had to use
const token = context.token.token;
The bug is on my part when I set the token in a state like so : setUserToken({token}); // 'token' being the name of the login() function's parameter
instead of : setUserToken(token);
Use your browser and IDE debugger and it'll be easy-ish to spot what's the error :)
Cheers mate
Thank you!