Learn GraphQL In 40 Minutes
HTML-код
- Опубликовано: 28 сен 2024
- GraphQL is the hottest technology when it comes to server side APIs for good reason. It is incredibly fast to develop with, and it makes building a front-end painlessly easy. In this video I am going to be teaching you what GraphQL is, why it is important, why it is better than REST, and then we will be walking through an entire Node.js and Express GraphQL API for books and authors. By the end of this video you will have a complete understanding of what GraphQL is and how to use it.
Code For This Video:
github.com/Web...
Twitter:
/ devsimplified
GitHub:
github.com/Web...
CodePen:
codepen.io/Web...
#GraphQL #WebDevelopment #JavaScript
I really enjoyed making this GraphQL video, and would love to make more videos about learning a single topic in one video. Let me know if you have any topics that you would want me to cover in a similiar manner.
thanks for making such a wonderful video on graph QL. Could you please make some tutorial on integrating GraphQL with Sails-Mongo application?
Your videos are fantastic because you get right in to it and provide great, real-world applications for the code you're writing. Thank you! My request would be a video or a series of videos on securing your API with JWT and other approaches for authentication, CSRF protection, etc. Thanks!
Thank you for the suggestions. JWT is a topic I want to cover in the nearish future.
Web Dev Simplified hi there, have you been able to create this tut yet? Love your tutorials!
Can you please make tutorial on apollo server with node js. Couldn't able to find much on web.
All these channel videos are gems. By the way, if somebody else is facing the error "TypeError: expressGraphQL is not a function" just replace the import from
const expressGraphQL = require("express-graphql");
to
const { graphqlHTTP } = require("express-graphql");
Thank you!
Thanks
excellent - thank you!
or like this `const expressGraphQL = require('express-graphql').graphqlHTTP;`
Thanks men
const expressGraphQL = require("express-graphql");
-- should be --
const { graphqlHTTP } = require("express-graphql");
I kept getting an error till I looked up the documentation
Thanks man.
thanks man that helped
omg thank u, half an hour I was trying to figure out what is wrong
Great help, using typescript would have saved some time, and it's because they've make some breaking changes
yes. alternatively :
const expressGraphQL = require('express-graphql').graphqlHTTP
require('express-graphql') returns an object with a property called graphqlHTTP that is the function you want to call.
As an FYI -- You can run `npm init -y` and it will enter in all default values for you :) Hope that helps. Fantastic video. I love your explanations!
But who doesn't love a good button mash 😂😂
Ha! I didn’t know that! Thank you!
mans straight out of the twilight saga
Didn't know anything about GraphQL, so glad this was the first video I watched. Such a great exposition. Thanks!
This video walkthrough explains GraphQL in such a crystal-clear way. Not surprised to see high-quality content coming from WDS. Thanks for this excellent tut
I Have wasted like 4-8 hours minimum with many tutorials, none of them provide full explanation and implementation clearly, yours was straight to the point, understandable and magically easy to comprehend and apply, love it.
This was great! I finally finished my web development bootcamp and just landed a job as Front-end Developer for a dream company of mine! Your videos have helped a ton! Thanks for everything man and keep up the great videos!
Congratulations! That is amazing. Nice job putting in all the hard work. How was the boot Camp experience for you? Did you feel you learned a lot?
@@WebDevSimplified The bootcamp was a great experience, I've been doing web development since high school so I had a background in it prior to starting it. Everything came pretty quickly to me and I was able to easily understand the advanced concepts easier having had that prior experience. However, alot of others had no experience and the advance concepts where too hard for some people to grasp. I tried my best to get there before class and stay after class to tutor people though. Overall, it was a way for me to figure out the best path and what to learn in order to become employee ready.
@@LeHuffy That's amazing. I am really glad that it went so well for you, and that you were able to help others along the way. I wish you the best of luck with your future career.
@@WebDevSimplified Thanks man, appreciate it! Keep up the great videos!
@@LeHuffy how long does it take?
Hell of a crash course. Great info without talking down to your audience. Been in software for a long time and just now needing GraphQL for a job. I appreciate the in-depth overview without explaining what an IDE is (and other such nonsense). 🤣🤣
Great tutorial. GraphQL is starting to make sense from watching this.
Thanks! I am glad I could help.
Seriously, thank you. You did a great job explaining a fairly complex topic, and made it really make sense in the context of the application you built. Great job, and please do keep making these types of videos. I think I speak for everyone when I say thank you!
3 minutes into this video and I'm already learning so much more than struggling through countless google searches.
Thank you for this video!
Great explanation mate.
Was looking for a simple video tutorial to understand the basics of GraphQL, because I was bored to read any written tutorials at the moment,
and this was such a great video.
Thanks
Mr. Web Dev Simplified, your channel has helped me SOOO much. You are a natural teacher. I hope these videos are making you rich and you're driving something really spiffy (like a gold-plated Sion) and that you have a swimming pool with a floating bar, which is what we are all aspiring to.
This is a very helpful video to learn the basics of building a graphql server. Very well presented! Try coding along with the presenter.
A great brief tutorial, I think I fell in love with GraphQL now, thank you!
Your skill for explaining these complex topics is impressive. Thanks for the tutorial
I always enjoy your teaching style. So clean and clear. Great content. Thank you!
I can't tell you how nice it is to watch videos that cut out the bulls***
Thanks so much!
Awsome Video to get up and running with GraphQL. I would suggest turning off the tooltip hint in VSCode as this makes it more difficult to see the code you are typing. Thanks for the video :)
i love how this guy simplify everything, thank you
Damn. This is a MUST SUBSCRIBE channel. Awesome tutorial, easy and fast. Great job!
This should be on the top.
THANK YOU! 🔥
This video was well done, the pace and material were perfect for an intro into GraphQL.
I'm new to the world of GraphQL and this was really helpful! Thanks for making this crash course
You never Disappoint with your videos , thank you
Thanks for the amazingly easy explanation of that topic! Best one I've found! Greetings from Germany 🙏🏼
Thank you! I'm really glad you enjoyed it.
Really your videos on youtube about development is so helpful Kyle! we are so lucky. Specially thanks👌👍
I really enjoyed this video and the way you explain was excellent I was having too many query about GgraphQL those all things cleared for me now. Thank you.
Really interesting. I haven’t used it before, but I can see why it’s so popular 👍🤓
You've got to check it out. It is really fun when it finally clicks.
The simplest GraphQL tutorial there is.
Thank you
Excellent Explanation and in 40 mins you explained all necessary concepts.
I always wanted to look into GraphQL and found your video today. This is so cool and thanks a lot for making this...
08:30 const expressGraphQL = require('express-graphql').graphqlHTTP;
This guy fully deserves over a million subscribers.
GraphQL learned in < 40 mins, Fab!👌
well good explanation is grapql gives you exactly what you want in a clean way exactly like this channel did straight forward and clean short video explanation
Explained really well, I understood everything and was able to make my own example after watching this. Thanks for your efforts.
Thank you so much bro for this video, it helps me a lot to grasp Graphql.
I used to think GraphQL brought some sort of complexity to your application. After watching this, I realized how far from the truth I was. Imma use it in every application henceforth.. Thanks for the vid, you are awesome!
there is another version for constructing the object type with a string... but i really really REALLY prefer the way you do it in the video XD
Amazing Amazing tutorial on GraphQL and this is just that I was looking for getting quick understanding on this amazing amazing technology. Also your teaching style is just an awesome and I really loved it. Thanks
Cool explanation, I’m a front end developer from 🇷🇺 Thanks a lot
Thanks, that's pretty dope tech and you've done very well explaining it, kudos!
Great video.
Simple explanations of a complex subject including data normalization.
I would like to thank you for your awesome tutorial.
You make it really easy to understand and not boring at all.
Please keep going you're doing great !!! What's your good name, please?
A very important point is made on circular referencing (ReferenceError) at 31:13
9.5/10 Well made video. Only improvement would be to skip the Hello World part and just jump straight into the books and author
Thanks for a good explanation.
Queries, schemas.. It reminds me so much of SQL.
Another one tool to be asked on a technical interview ;)
Please make videos on code refactoring/clean code. You can make a series of short videos where you pick one code smell and you can explain why it is bad and how we can remove it. (Please use Java language if you are going to make videos on this topic)😀
Fantastic ! you nailed it in 40 minutes
Excellent tutorial! Thank you!
It is a good video. Although It would have been better to make it a little bit longer and go more into detail about what some of the imports are doing. Some of the topics you just rush through as if everyone has great knowledge of GraphQL!
When are you gonna start making courses? You really good at teaching
This was amazing. Thanks for all the free info!
Cant understand clearly the difference between REST because in the first example we can do the same with REST
for example:
getAuthorsAndHisBooks
then we do some joins in our SQL and return the authors array with his books array in each author element
const { graphqlHTTP: expressGraphQL } = require("express-graphql");
the expressGraphQL function has been renamed to graphqlHTTP. replace with the above code
Thanks :), I was looking for that . BTW why we typing like this {graphqlHTTP: expressGraphQL}? . Can u please explain what is syntax means? Thanks
Great video! Very easy to follow, a great entry point into GraphQL
I am still a little unclear on how graphQL improves efficiency in some ways. For example, under fetching, I can see how from the front end it seems like you were only getting the data you need, but my understanding of it is the graphQL service we made will still fetch all authors and books from the "backend" and it then just filters them before the frontend receives it. I recognize that this makes it much simple to work with in the front end, but is it really an efficiency improvement if it still gets more data then necessary from the backend and filters it in the graphql service? If anyone has an explanation of this or needs me to further clarify this questions please let me know!
The only thing I can think of is, it reduces the amount of end point the backend guys will need to create for specific data requests or the part of handling the data as you mentioned by the frontend and all the filter stuffs will just be done by graphql, less code.
Outstanding work! Very helpful!!!
Great video!
As an advice try to go at a slower pace. It may take a little longer to do but the concepts will be a lot clearer.
@Web Dev Simplified You are simply AMAZING for this!!! Keep up the good work bro
Thank you!
you are the best teacher!!
Great explanation.
And Great Work.
Keep up good working.Best Wishes.
Thank you!! This tutorial is super helpful and clear!!!
Great explanation, really laconic and clear
This is just awesome! Thanks a lot!!
Awesome Kyle. Thank you.
Very interesting and fairly simple to understand! Thanks for you effort :)
This is an amazing tutorial. Thank you!
Thank you for this awesome video!!!
Superb! Helped me a lot
AKG microphone, good man :D
The Static DB values:
const authors = [
{ id: 1, name: 'J. K. Rowling' },
{ id: 2, name: 'J. R. R. Tolkien' },
{ id: 3, name: 'Brent Weeks' }
]
const books = [
{ id: 1, name: 'Harry Potter and the Chamber of Secrets', authorId: 1 },
{ id: 2, name: 'Harry Potter and the Prisoner of Azkaban', authorId: 1 },
{ id: 3, name: 'Harry Potter and the Goblet of Fire', authorId: 1 },
{ id: 4, name: 'The Fellowship of the Ring', authorId: 2 },
{ id: 5, name: 'The Two Towers', authorId: 2 },
{ id: 6, name: 'The Return of the King', authorId: 2 },
{ id: 7, name: 'The Way of Shadows', authorId: 3 },
{ id: 8, name: 'Beyond the Shadows', authorId: 3 }
]
Very helpful, thank you very much!
Great Video
But I would like to point out 2 things
1) In the real world, we might always need to connect it to DB, so when the tech is so much dependant on it, I think you should include it. If DB connection and querying was there, this was 100% complete
2) The font size on the GraphiQL was lil smaller
Just some positive feedback, it was almost perfect :)
Naah! When I was initially learning graphQL I may have agreed with you, but it’s MORE import to remember that your data-source can be ANYTHING at all.
Anything that has state/data can act as a GraphQL data source. External (local or remote) files, rest apis, OS system state, application state, another graphQL API, sensors... and also a database. 😉
Understanding the fundamentals of GraphQL is a lot more important than wasting time on integrating a database and making it look like a “real” project.
Hey brother. Can you make a video talking about subscription and how to implement them in a way that the servers can be scaled horizontally
Thank you so much for explanation.
The best Channel
Very helpful! Thanks!
Awesome tutorial. Thank you for making it.
amazing, thank you for making it much easier
Thankyou so much .Its really helpful.
Great tutorial for beginners.
super explanation.....good job
best tutorial
We can send array of IDs to get the books information using Rest API /authors/:ids/books as well right ?
Excellent content with good explanation
08:21 I thought it would error out on app.listen() because the port was passed as `5000[dot]`
But it did not! Funny
what happens when you query the author field within books which reference the author field? Will the server crash due to the circular reference?
Awesome video!
It does reduce the network calls but does it reduce the DB calls? I don't think it does but If it does, it would be awesome!
Great video. I just subscribed!
That's amazing.
Thank you so much!
thanks. this is a f*ing good tutorial
one question，so does that mean if we want to add multiple authors and multiple books，we need to run the mutation several times？
Is GraphQL an alternative to REST APIs ? Or Does it work on top of REST APIs ? Please explain.
Amazing video! Keep it up!