I started learning development with Brad about 5 years ago.. got my job as a software engineer 2 years ago, after one year a left for 40% increase in salary. Brad was the reason I got started and always excited when he does one of these. I started to learn MERN, however been working with python/flask/django and Vue lol It's time for me to go back to roots and relearn MERN with GraphQL. So excited
I went through this tutorial twice in the last two weeks and created the app twice. This tutorial was so helpful. I was able to work through all of my stuck points and the second time around I recognized the errors I made the first time. Thanks so much for this.
Hey Brad, Just installed the Github code after watching this video twice. At some point I will send a donation your way. I needed to place the .env file in the base of the server folder as opposed to the base folder, and change the Mongo URI to "mongodb+srv://...", but other than that, runs great!
Absolutely wonderful! This was one of the first projects that I took my time going through. I wanted to really make sure I understood what was going on and how to do things. I've paused the video, tried it myself, then played it back to see if I was remotely close. This 3 hour video took over 6 hours for me to complete over a span of 1 week. It was WELL worth it! Even through I don't feel like I remember everything(which is okay) I feel like a lot of the open loops are now closed and I'm a much better developer because of it. Thanks Brad for everything!
Your videos were the first I watched before I started my journey in web technologies. It has been 4 years ago since I watched your crash course videos. I even missed your voice!
1:14:46 i don't want to correct you but it might help someone. "By default, findOneAndUpdate() returns the document as it was before update was applied. If you set new: true, findOneAndUpdate() will instead give you the object after update was applied." and thanks for the awsome content!!!
As a web security engineer and an API enthusiast this course is just what will enable me move to the next level. Thanks so much Brad. Your content is always lit 🔥
Hey Brad! There's a new setting in the react extension to prevent the import of "React" (what you used to do with the underscore before). Just to to the React Snippet settings and uncheck "Controls if snippets should add import React from 'react' at the top of components".
As a Js - React frontend developer I can only say that GraphQL is now really one of the trends right now. By now a frontend needs to know a little bit of Backend, and for me that I am studying it, the backend is different but an incredible world. Brad thanks for this tutorial 😜
Personaly, I enjoy working in the backend when it comes to creating APIs, etc. Even more so than the frontend. It's just when we start getting into DevOps, etc, I don't have as much interest.
@@TraversyMedia Totally agree with you Brad, maybe because we create a lot in frontend and with the API, we get data and we can see it on the screen and play with it. With devOps, Docker, Kubernetes wooo, it's cool but it's really very different and honestly I'm not passionate about it.
@@TraversyMedia I actually just transitioned to SRE/DevOps from being a developer. Personally I love automation and infra provisioning, but I also am still in love with development. Your videos give me the best of both worlds.. I stay strong in my Dev-Fu with you, and then put my newly learned SRE Skills into play afterwards 😊
Thank you so so much for this tutorial Brad waiting for so long to have a great tutorial like that. Look forward to jumping into it when will have more time 🙏💪🏻
Oh my Gosh, I swear I've been looking for a decent GraphQL tutorial a couple of days and failed to find one. I'm just on cloud nine. I can't thank you enough! 😘😘😘
I am just getting to know GraphQL and diving in seriously. I am currently going through the book "Learning GraphQL" by Eve Porcello and this tutorial is incredibly timely for me as it will surely help me have a better grasp of all the concepts. Thank you so much for all these courses, Brad.
I really appreciate this kind of content especially because alot of similar tuts are 2 years out of date, but I can’t help but feel that not using TypeScript was a lost opportunity. I understand the different pros and cons of TS vs vanilla, and I am a sucker for compilation errors but projects on this kind of scale benefit a lot from type checking. A personal opinion that’s not gonna stop me from following along as best I can, but I will try and use TS. If any thing comes out of it I would mind sharing source code for anyone who is interested. But again thanks for an up to date guide with in demand technologies!
Typescript generally takes away the focus or becomes the focus when involved in these videos. I think that is why it was left out here. GraphQL is the focus here, not type checking.
@@milliorn That's definitely a sensible opinion, and I can see where your coming from. My rebuttal would be every statically typed language that supports GraphQL. Also GraphQL is typed, that's what the SDL is provides. In fast there are great synergies that can be gained using a tool like Type-Graphql. IMHO
@Traversy Media 1:23:16 you can now use rafc (React Arrow Function Component) to use a functional component without having to import React. It could be different for JSX (I typically use just regular .js files for my code).
Being a MERN developer(Thanks to Brad!) I wanted to broaden my knowledge in GraphQL. This was really a good introduction to GraphQL where MERN developers can just dive in and get their hands dirty. The amount of information is just enough to get an understanding of GraphQL and its workings. Thank you so much for this Brad! Can you also please upload an advanced video course on GraphQL that uses the Apollo server and has features likes authentication, authorization, pagination, etc.
Sir, I have purchased your "MERN stack e-commerce site from scratch" course. Sir, I have learnt a lot from you. Your way of explanation is excellent. I have taken others course also from youtube as well.
1:23:14 the snippets extension now has a dedicated setting for whether to import react or not. The setting is called "Import React On Top", in vscode settings.json add "reactSnippets.settings.importReactOnTop": false. That said there is currently a bug where it still imports React even if it's set to false.
Thank you so much for sharing! I hope you make a paid full one that includes Auth, Streaming, JWT management and all the good stuff, Thank you so much once again!
About the react snippets, they have provided option in the settings to enable or disable "import React from 'react'" so you can use the same command "rfc". I find this approach better.
hey i was encountering a problem when i reached to the timestamp of 27:55 and opened localhost:5000/ on browser it shows Cannot GET / instead of launching graphiql. Any idea why that's happening ?
brad is not only a genius and thorough in his work but his recent Revelations about his struggles before his meteoric success shows a very clean frank straightforward do gooder.
Hello Brad! Excellent tutorial as always dude! One thing to mention is that I am using Typescript and following the video. It seems that you don't have to pass the args on addProject() and in the other cases as well as when you define the addProject mutation in the Component the state vars are being passed directly there const [addProject] = useMutation(ADD_PROJECT, { variables: { name, description, clientId, status }, ... so no need to place them as args when invoking addProject(). Same thing for addClient() and deleteClient(). Only prerequisite is to have declared the state vars above the useMutation code chunk. Also It would be useful if you could reuse the project form in one component to both create and update a project. Best, Keep up the good work
Great video my man. I have taken some of your other courses on Udemy and they are all good. You are by far one of my favorite teachers whenever I want to pick up a new language/framework to add to my toolbox. Thanks again
Note for Apoollo Cache (Around 1:45:00) - In the DELETE_CLIENT mutation, The parameters for the deleteClient() method should be deleteClient($id: String!) not deleteClient($id: ID!)
Absolutely amazing.!!! No question at all I would like to express my words. First of all I Salute you 🙋♂You are a Honest and valuable personality I wish you success in your further path. Long Live ✊ I bet you all will not see any one like him the real Legend. Thank You.✌
This was awesome. Followed all the way through and learned a ton. Can't wait for a more advanced version. In the meantime, i'm going to take what I learned a build sometimes fun.
Hi Brad...am Dinesh from India.. I like your courses & I bought your courses from udemy it's really helpful and upgrading my career. Now am working with MNC company. Once again special thanks to Brad. Your support is important for us. Keep doing your videos. Thumbs up 👍
Don't you think MNCs require you to know these stuff related to MERN in much more depth than what is being taught to us on YT videos ? Just asking for ur opinion cause i haven't landed into a job yet 😅
I don't know why, but I find frontend kinda tough compared to backend. Maybe I am good at DSA and SQL and that's the reason I love doing stuff on the backend. GraphQL looks great. I am used to the rest API format. REST api gives a more formal look to our code base. Haven't worked with GraphQL so can't say the same about it.
Frontend is the direct end user interaction that may cause many bugs you have to consider reactivity with state. Performance and very crucial good styling. Both desktop and responsive. So I consider front-end is way harder than backend
Quite a lot of different techs covered at a basic level here but enough to get an idea of how things work. One of the things I like about using GQL is the codegen tools for it if you use typescript. It's awesome to be able to write a query and then have codegen automatically create React hooks for you that give a typed response.
Thank you very much and God bless you ! I've done it second by second and have learned by the way React which I find very interesting. Muchas gracias !
I've made it through whole this amazing tutorial! And now my lead says that our backed will be based on SQL database. Anyway on the client side this might help me a lot! Thank you, Brad!
Hi. Simple fix for the status (edit project form), that worked here. (03:05:00 aprox). const getStatusValueFromString = str => str === "Not Started" ? "new" : str === "In Progress" ? "progress" : "completed" thx for the video
I started learning development with Brad about 5 years ago.. got my job as a software engineer 2 years ago, after one year a left for 40% increase in salary. Brad was the reason I got started and always excited when he does one of these. I started to learn MERN, however been working with python/flask/django and Vue lol It's time for me to go back to roots and relearn MERN with GraphQL. So excited
congratulations man!
@Reynaldo are you sure yo dont need a man from your class in the company ? lol
@Reynaldo why mern
and i'm a django guy switching to nestjs, graphql & prisma!
Awesome!
I went through this tutorial twice in the last two weeks and created the app twice. This tutorial was so helpful. I was able to work through all of my stuck points and the second time around I recognized the errors I made the first time. Thanks so much for this.
I was just getting into learning the MERN stack and have been interested in GraphQL. This is right on time.
same story
Awesome course Brad. So generous of you to share this much high quality work for free
Hey Brad, Just installed the Github code after watching this video twice. At some point I will send a donation your way. I needed to place the .env file in the base of the server folder as opposed to the base folder, and change the Mongo URI to "mongodb+srv://...", but other than that, runs great!
This is awesome. I was looking into graphql and, lo and behold, you produced a course that implements it. Thank you!
DUDE I was actually looking for a quality tutorial with this exact stack THANK YOU BRAD
The best tutor, easy to follow, zoomed code, clear explanation, ideal speed and voice. Thank you!
Absolutely wonderful! This was one of the first projects that I took my time going through. I wanted to really make sure I understood what was going on and how to do things. I've paused the video, tried it myself, then played it back to see if I was remotely close. This 3 hour video took over 6 hours for me to complete over a span of 1 week.
It was WELL worth it! Even through I don't feel like I remember everything(which is okay) I feel like a lot of the open loops are now closed and I'm a much better developer because of it. Thanks Brad for everything!
Ditto everything said in this comment!
Finished the whole project, What a perfect way to understand Graphql.
Your videos were the first I watched before I started my journey in web technologies. It has been 4 years ago since I watched your crash course videos. I even missed your voice!
Cannot thank you much for this. Just about to complete your MERN playlist & you've dropped this 🔥
1:14:46 i don't want to correct you but it might help someone. "By default, findOneAndUpdate() returns the document as it was before update was applied. If you set new: true, findOneAndUpdate() will instead give you the object after update was applied." and thanks for the awsome content!!!
You are magician. I've been interested in GraphQL for some time, and this tutorial is "just what the doctor ordered"
Absolutely on the Pointttt !!! Love your teaching style Brad
As a web security engineer and an API enthusiast this course is just what will enable me move to the next level. Thanks so much Brad. Your content is always lit 🔥
This came out at the perfect time, I couldn't find any recent tutorials that were this helpful.
Hey Brad! There's a new setting in the react extension to prevent the import of "React" (what you used to do with the underscore before). Just to to the React Snippet settings and uncheck "Controls if snippets should add import React from 'react' at the top of components".
Thank you mate! Great tip
The best graphql tutorial from the best tutor.
Brad keep an eye please on remix run.
It is the next big thing I think.
I did a crash course on it a few months ago. I think you're right.
Love using GraphQL. Here for the algorithm. Thanks for another solid tutorial Brad.
It blows my mind that you give this away for free. Thank you for what you do.
Wow I have been waiting for a video like this currently in line with what am learning
I love how you made it so simple. I am thinking of adding an authentication feature on top this. Thanks.
Спасибо за подробное видео ! Без лишней воды, все по делу. Связка хорошо работает , рекомендую 👍Автор буду следить за вами дальше , успехов !!
As a Js - React frontend developer I can only say that GraphQL is now really one of the trends right now. By now a frontend needs to know a little bit of Backend, and for me that I am studying it, the backend is different but an incredible world. Brad thanks for this tutorial 😜
Personaly, I enjoy working in the backend when it comes to creating APIs, etc. Even more so than the frontend. It's just when we start getting into DevOps, etc, I don't have as much interest.
@@TraversyMedia Totally agree with you Brad, maybe because we create a lot in frontend and with the API, we get data and we can see it on the screen and play with it. With devOps, Docker, Kubernetes wooo, it's cool but it's really very different and honestly I'm not passionate about it.
@@TraversyMedia I actually just transitioned to SRE/DevOps from being a developer. Personally I love automation and infra provisioning, but I also am still in love with development. Your videos give me the best of both worlds.. I stay strong in my Dev-Fu with you, and then put my newly learned SRE Skills into play afterwards 😊
Thank you so so much for this tutorial Brad waiting for so long to have a great tutorial like that. Look forward to jumping into it when will have more time 🙏💪🏻
Oh my Gosh, I swear I've been looking for a decent GraphQL tutorial a couple of days and failed to find one. I'm just on cloud nine. I can't thank you enough! 😘😘😘
I am just getting to know GraphQL and diving in seriously. I am currently going through the book "Learning GraphQL" by Eve Porcello and this tutorial is incredibly timely for me as it will surely help me have a better grasp of all the concepts. Thank you so much for all these courses, Brad.
What a "coincidence" for some of us who have been just starting with GraphQL
Thanks buddy!
This is what I am waiting for, Thank you very much
exactly what I need, as always!! Thanks Brad!
I really appreciate this kind of content especially because alot of similar tuts are 2 years out of date, but I can’t help but feel that not using TypeScript was a lost opportunity. I understand the different pros and cons of TS vs vanilla, and I am a sucker for compilation errors but projects on this kind of scale benefit a lot from type checking. A personal opinion that’s not gonna stop me from following along as best I can, but I will try and use TS. If any thing comes out of it I would mind sharing source code for anyone who is interested.
But again thanks for an up to date guide with in demand technologies!
Please do share the TS source code with us whenever you are done. It will be a great help to us.
Typescript generally takes away the focus or becomes the focus when involved in these videos. I think that is why it was left out here. GraphQL is the focus here, not type checking.
@@milliorn That's definitely a sensible opinion, and I can see where your coming from. My rebuttal would be every statically typed language that supports GraphQL. Also GraphQL is typed, that's what the SDL is provides. In fast there are great synergies that can be gained using a tool like Type-Graphql. IMHO
Brad always has something we need the most ❤️
The GOAT of tutorials (Traversey) makes a comeback!
Thank you this project helps to understand how Graphql works.
Awesome! I would love to enhance my knowledge using this tutorial as well. Though I wish it had come five days sooner.
You made it really simple and interesting to learn!
Perfect timing I was going to look for an up to date GraphQL course so I could relearn it. This is going to be the one!
thank u so much Mr.Brad, it was an amazing project
@Traversy Media 1:23:16 you can now use rafc (React Arrow Function Component) to use a functional component without having to import React. It could be different for JSX (I typically use just regular .js files for my code).
Being a MERN developer(Thanks to Brad!) I wanted to broaden my knowledge in GraphQL. This was really a good introduction to GraphQL where MERN developers can just dive in and get their hands dirty. The amount of information is just enough to get an understanding of GraphQL and its workings. Thank you so much for this Brad! Can you also please upload an advanced video course on GraphQL that uses the Apollo server and has features likes authentication, authorization, pagination, etc.
Sir, I have purchased your "MERN stack e-commerce site from scratch" course.
Sir, I have learnt a lot from you. Your way of explanation is excellent. I have taken others course also from youtube as well.
This guy Is a legend I learned web development from him and got a job with DOD
This is so great! Thanks for sharing! Keep up the great work!
1:23:14 the snippets extension now has a dedicated setting for whether to import react or not. The setting is called "Import React On Top", in vscode settings.json add "reactSnippets.settings.importReactOnTop": false. That said there is currently a bug where it still imports React even if it's set to false.
Awesome, thank you
I've been wondering about this for a while now. Thanks!
didn't work for me still import the react
Thank you so much for sharing! I hope you make a paid full one that includes Auth, Streaming, JWT management and all the good stuff, Thank you so much once again!
Needed a comprehensive guide for GraphQL, you did a great job, Brad!
"If I can spell this damn word" :D Brad. please never change, you are a legend in this game!
About the react snippets, they have provided option in the settings to enable or disable "import React from 'react'" so you can use the same command "rfc". I find this approach better.
OOOO a big one!!! Going to follow along in TypeScript 😎 Thanks as always Brad. Hope you and the family are having a good start to y'alls summer!
Thank you for making it very simple and clear explainations.
Everyrime I see a video from you, it's priceless. Thanks champ
Sat through the whole thing, thank you very much Brad
Awesome timing for this video release!! I only wish I would have found your channel sooner
Just complete this course.
Wow, Great content.
I just like it. Thank you.
Brad, you explain things very well. Thanks for your education material.
Thank you Brad!!! It was a great tutorial, I learned a lot through it.
Right on time. Amazing work Brad. I have being looking forward to learning graphql.
Thanks a billion! You made my day! I absolutely adore your tutorials and the way you approach teaching new stuff. Have a lovely day!
Wow everything i needed in one video. Thanks!
Great video, I have learned a lot here.
Thanks a lot, Brad.
hey i was encountering a problem when i reached to the timestamp of 27:55 and opened localhost:5000/ on browser it shows Cannot GET / instead of launching graphiql. Any idea why that's happening ?
brad is not only a genius and thorough in his work but his recent Revelations about his struggles before his meteoric success shows a very clean frank straightforward do gooder.
Very good tutorial. Loved every second
Hello Brad! Excellent tutorial as always dude! One thing to mention is that I am using Typescript and following the video. It seems that you don't have to pass the args on addProject() and in the other cases as well as when you define the addProject mutation in the Component the state vars are being passed directly there
const [addProject] = useMutation(ADD_PROJECT, {
variables: { name, description, clientId, status },
...
so no need to place them as args when invoking addProject(). Same thing for addClient() and deleteClient(). Only prerequisite is to have declared the state vars above the useMutation code chunk.
Also It would be useful if you could reuse the project form in one component to both create and update a project.
Best,
Keep up the good work
Great video my man. I have taken some of your other courses on Udemy and they are all good. You are by far one of my favorite teachers whenever I want to pick up a new language/framework to add to my toolbox. Thanks again
I liked seeing GraphQLObjectType way of creating types as opposed to its higher-level alternatives more commonly used in tutorials.
Would be interested in a paid Nextjs + Graphql course with auth and a cms!
Thanks from Japan.
Your video is very useful to me.
Thank you very much!!
Note for Apoollo Cache (Around 1:45:00) - In the DELETE_CLIENT mutation, The parameters for the deleteClient() method should be deleteClient($id: String!) not deleteClient($id: ID!)
This isn't entirely accurate as in the backend, the type for id is set as GraphQLID
Nice just finished my backend learning, I will be able to see all I learnt
Thanks Brad, you are No.1 developer on Earth Planet.
Just in time for my job interview on friday, thanks!
Absolutely amazing.!!! No question at all I would like to express my words. First of all I Salute you 🙋♂You are a Honest and valuable personality I wish you success in your further path. Long Live ✊ I bet you all will not see any one like him the real Legend. Thank You.✌
its been long since i built a project using this stack cause of school, I'm taking this course to refresh my memory
This was awesome. Followed all the way through and learned a ton. Can't wait for a more advanced version. In the meantime, i'm going to take what I learned a build sometimes fun.
Awesome awesome awesome, I just finished it, and i learned alot and alot thank you man i cant thank you enough
OMG this is EXACTLY what I've been looking for.
Really helpful tutorial. Love it.
GraphQL. So hot right now. Definitely adding this to my watchlist. Been wanting to dig in on GraphQL for a while.
Another fantastic tutorial learning GraphQL with FULL STACK MERN
Thanks again Brad for an awesome tutorial.
Hi Brad...am Dinesh from India.. I like your courses & I bought your courses from udemy it's really helpful and upgrading my career. Now am working with MNC company. Once again special thanks to Brad. Your support is important for us. Keep doing your videos. Thumbs up 👍
Don't you think MNCs require you to know these stuff related to MERN in much more depth than what is being taught to us on YT videos ?
Just asking for ur opinion cause i haven't landed into a job yet 😅
Awesome!!!! This is what I was looking for!!!
I don't know why, but I find frontend kinda tough compared to backend. Maybe I am good at DSA and SQL and that's the reason I love doing stuff on the backend. GraphQL looks great. I am used to the rest API format. REST api gives a more formal look to our code base. Haven't worked with GraphQL so can't say the same about it.
I kind of feel the same way. I think what makes the frontend tough is managing state in the browser environment. If I had to put it in simple terms.
@@TraversyMedia Exactly!! I am always in 2 minds when and where to use "usestate" and "useEffect".
Frontend is the direct end user interaction that may cause many bugs you have to consider reactivity with state. Performance and very crucial good styling. Both desktop and responsive. So I consider front-end is way harder than backend
Great video!!!
One correction: setting { new: true } does not create a new entry if matching id was not found. It is done using { upsert: true }
Wow that's a great explanation Graph QL
Thank you so much! You're the Legend! 🔥🙏
Fantastic video, Brad!
Quite a lot of different techs covered at a basic level here but enough to get an idea of how things work. One of the things I like about using GQL is the codegen tools for it if you use typescript. It's awesome to be able to write a query and then have codegen automatically create React hooks for you that give a typed response.
Thank you very much and God bless you !
I've done it second by second and have learned by the way React which I find very interesting.
Muchas gracias !
I appreciate everything you do, great content as always. full stack angular project would be great as well
Wow my the redux toolkit I wanted to learn GraphQL and hear what it is Thank You Brad
Thank you brad.your content are great and helpful for myself. 💕 💕
Great Content Brad. Keep it up.
I've made it through whole this amazing tutorial! And now my lead says that our backed will be based on SQL database. Anyway on the client side this might help me a lot! Thank you, Brad!
Hi.
Simple fix for the status (edit project form), that worked here. (03:05:00 aprox).
const getStatusValueFromString = str =>
str === "Not Started" ? "new" : str === "In Progress" ? "progress" : "completed"
thx for the video
Wow, that was extremely useful. Thanks.
Passion & Love. And the devotion in voice...
Was patiently waiting for this
Hea Brad, thanks for this. Something is rare though, next.js and graphql endpoint with graphql subscription setup.