@@Fireship If it helps, I found an awesome udemy course for GraphQL. Love the video from fireship to get started too www.udemy.com/course/graphql-bootcamp/
I loved that you increased font-size on vscode for optimized readability on mobile devices. Watching your tutorials is a delightful, user-friendly experience.
I'm an experienced full stack developer (MERN) and making REST APIs. GraphQL makes me so happy because of how simple the requests are to get the data you want. It's so intuitive!!! Now setting it up with Apollo looks like the hard part. I'm going to learn that.
This is gold, flawless! P.S. GraphQL implies a little bit more work on the backend part, but it will handle any "request" for a specific object, after that it's all frontend asking for what it needs
I think GraphQL might be worth it for small teamz as well. Even though it introduces a bit of complexity and planning ahead for the backend developer, it makes it easier for the front-end developer to develop things fast. Of course, it'll depend on the application in context.
30 seconds into this video you convinced me to convert my current big project to GraphQL. I'm using the National Rail API for data, which returns some really weird shit sometimes, making error-checking a huge chore. I swear I've spent more time correcting dumb errors than I have actually writing new features. GraphQL looks like it'll help clear my front end code right up!
Its been more than a year now since i moved from Angular to React. I learned alot, find it exciting but no longer. :) One of the great experience of mine was to use React and GraphQL on 2 projects. Market demand is kind of moving us towards that direction but truth is i still miss Angular. 😔
I agree Saad! My company where I work uses React but I was an Angular fan boy :/ . I won't lie JSX is really the bees knees. I think Angular is better than React + Redux though.
Please make video on how you learn so quickly. share your insights on how we can learn and develop like you share your tips and tricks for fast learning and how you able to do so many things altogether share your thought with us thank you .
This was super good, but I'd have appreciated it if the other frameworks used would have been listed somewhere in the description, or mentioned in the beginning of the video. I have no experience with typescript or angular, which made the whole thing a lot harder to follow, and had I known beforehand I could have found a video focusing more on either vanilla js or mern. Still, awesome content!
Your tutorials are jus awesome. The information you provide is exactly what we need. You are a great mentor and teacher. Always waiting for your new videos.
Take a look at postgraphile. It'll set up your graphql end based off of your postgres db. No need to write any resolvers your self and it's blazing fast.
Nnnnope. I don't want to code even a single line of this. And I've been coding for over 3 decades. Yeah, call me old, but we've made life so fvcking difficult with all of these APIs just to do what should be a very simple thing. We now have a development culture that takes great pride in this overcomplexity as if it's some kind of worthwhile accomplishment or badge of honor. However, it's all just some things that others have stacked on top of other things... a series of Band-Aids over a core wound. The end result? Programmers today are faster to experience burnout and stress, feeling like they need to know all of these APIs which will be "dead" in a few years. Hell, there are already so many videos touting the death of GraphQL!!! This is shear madness.
Hi Jeff, i discovered you today, you are amazing man! your video editing is also amazing, which program do you use for those effects ? and where do you find the icons ?
great vid. you mentioned Apollo being a state management - on fetching a specific launch detail will it check for its existence in the list before sending a new request to the server?
Great video! I'm having an issue and the HTML file for launch list and details wont compile correctly. it gives an error because if the ngcontainer. I had to put the ng container myself and it was already in the file. Where did I go wrong?
Why this example for REST? ... It is not equal to the GraphQL example. I mean - in REST you can request `/sandwich` and you can get JSON in response where you'll have properties bread, ham and cheese. Furthermore - the GraphQL can be as shitty as the REST example you provided - you can make three different requests for `bread { ... }`, `ham { ... }` and `/cheese { ... }`. ... Good video, but the examples were not identical and you've shown yourself as very bias here :) ... and this could mislead someone who's new to APIs.
I think the example is perfectly fine for trying to demonstrate it. If you want to separate properties to make the requests more dynamic, you have to provide multiple different requests in a REST API. With GraphQL you only need to provide one request containing what properties you want to get back. Saying you can do it the same way as a REST API is silly. Of course you could do it the same way, but the point is that you can get the flexibility of specifying what information you want for a sandwich without separating the information into multiple requests like you have to in the REST API example.
I see the problem now. You've assumed that the ham, cheese, and bread that makes up the sandwich is information that is always being requested. The point of separating the bread, ham, and cheese into separate request calls is because on the front end it may be the case that the person only wants to know what type of bread the sandwich has. In which case if you were to have all the information inside a single request '/sandwich' you are sending unnecessary information to the user and that is inefficient. The way GraphQL works is that the single request 'sandwich { bread }' would give the person only the bread. For a REST API the only way to do this is to make a '/bread' request. Essentially, if you want a single pieces of information you will have to create a request for each of them individually. That's why he showed this example. With GraphQL you can specify single or multiple properties in a single request. If I want to know what type of bread and what type of cheese is in a sandwich then that's a single request in GraphQL sandwich { bread, cheese }. It is two in REST which would be '/bread' and '/cheese'. '/sandwich' is only useful if you want all the information about the sandwich.
@@DBZM1k3 I'm starting to see the idea :) But at the same time - I guess you can do the same with REST, no? Have an endpoint where you can pass the props you want to get and you will get only the info for those props ... ?
@@peterveliki7918 it would be possible, yes. But out of the box this isn't possible with REST as it wasn't designed with that sort of flexibility in mind. You would have to develop a flexible framework around the already existing api. The simplest way I can see to implement it would be to include a string in the body of elements you want to pass back. Maybe as comma separated values? And then parse it that way. That wouldnt look as clean as the GraphQL implementation however. And it certainly wouldn't be as flexible as GraphQL though as you can include additional things like sorting, filtering, and limiting data. GraphQL can have nested data, from a 3rd party source(Like it was done in this video) or other collections in your database, as well. Which would be even harder to implement in REST unless you modify it a bunch. You can see in this video it was very easy to have his own GraphQL query SpaceX's graphql api. They can be stacked pretty easily.
Ok so we're talking about how useful this query language is for linking front end to back end. But in my own narrow practical experience, it seems no different from mysql. When you're developing back end code in a certain language, all of the graphql queries just end up being strings. So how can I link this "language" to my own back end code in a more practical manner that doesn't just involve string interpretation? (I'm working with python for those curious)
What do you think about using jest, and angular these days? I've been using it at work, and it's wayyy better than the stock karma/jasmine combo it comes with
2:30 REST Resource Expansion allows 1 request to be made. For the sandwich example, a request could be made to /sandwich?expand=.bread,.ham,.cheese. Here is a talk about the part of ReST that is usually not followed youtu[.]be/g8E1B7rTZBI
Nice video! But i don't get why in a rest environment i should send multiple requests to different endpoints... if the object/record/whatever is made up of the same properties and i know the object/record/whatever i am asking for, why shouldn't my rest app return all in one as with the graphql counterpart? Thanks for who will answer :)
Hi , bit late to the party but I have a question , in the apllo.config.js file , we add a service right , in this service does the name has to be "angular-spacex-graphql-codegen" ? Or is it just a sample name (could be anything) ?
I am trying to convince peeps at my new job to start using GraphQL. They are big on Entity Framework. Do you still need Apollo (or any GraphQL) on top of EF?
You can still use your ORM, but instead of REST endpoints you would create graphql resolvers. Apollo is not required, but it provides consistent framework especially when used on both the client and server.
DUDE! This is not technically correct! Nobody fetches "a sandwich" in 3 requests. That's why there are DTO types. Which in case of TS back and frontend can also be shared, to give exact typed communication between the two. Please don't mislead beginners with uncorrect information.
No. He is correct! The reason it is done this way is to allow flexibility of the information provided to the frontend. If you only want to know what type of bread a sandwich uses you can't get that information from '/sandwich' without also getting ham and cheese. That is costly as you are sending more information than necessary. In the example of GraphQL you can specify 'sandwich { bread }' to only get the bread type of a sandwich. Do you see why it would be useful in REST to make several requests now?
This is the first video of yours where I strongly disagree with the simplified explanation. "a consistent way for your frontend to request data from your backend despite any difference in the programming language" HTTP Restful protocol does the same thing, as does any other protocol. Frontend and backend don't have to be using the same programming language in any scenario.
![Stromae, Pomme - “Ma Meilleure Ennemie” (from Arcane Season 2) [Official Visualizer]](http://i.ytimg.com/vi/1F3OGIFnW1k/mqdefault.jpg)
I love how you just get down to business...so many tutorials are so unnecessarily longwinded and slow
That's why I created this channel
Absolutely
@@Fireship And that's why I subscribe 👍
This
🤠
Me: Oh man, this job post requires 3 YOE with GraphQL.
Fireship: I'm about to make this man's whole career.
Haha, graphql has hardly been around for 3 years
@@Fireship If it helps, I found an awesome udemy course for GraphQL. Love the video from fireship to get started too
www.udemy.com/course/graphql-bootcamp/
@@Fireship That's never stopped any recruitment firm (and many companies) I've ever known.
I loved that you increased font-size on vscode for optimized readability on mobile devices. Watching your tutorials is a delightful, user-friendly experience.
I'm an experienced full stack developer (MERN) and making REST APIs. GraphQL makes me so happy because of how simple the requests are to get the data you want. It's so intuitive!!! Now setting it up with Apollo looks like the hard part. I'm going to learn that.
Just found this channel a few weeks ago and it has become one of my obsessions!!
Jeff always hits a sweet spot with every video he makes. I think he picks every winning tech out there.
This is gold, flawless! P.S. GraphQL implies a little bit more work on the backend part, but it will handle any "request" for a specific object, after that it's all frontend asking for what it needs
Thank you! For sure, the backend implementation is where things can get tricky.
I think GraphQL might be worth it for small teamz as well. Even though it introduces a bit of complexity and planning ahead for the backend developer, it makes it easier for the front-end developer to develop things fast.
Of course, it'll depend on the application in context.
No graphs in the video. 0/10. lies.
I Just Learn the Basics Of Graph-QL and Angular By Listening You🧡
30 seconds into this video you convinced me to convert my current big project to GraphQL.
I'm using the National Rail API for data, which returns some really weird shit sometimes, making error-checking a huge chore. I swear I've spent more time correcting dumb errors than I have actually writing new features. GraphQL looks like it'll help clear my front end code right up!
Yoooo this graphql code generator is RAW!!!!! I didn't know it makes a whole service with methods! SOOO GOOOD!!!!!
Its been more than a year now since i moved from Angular to React.
I learned alot, find it exciting but no longer. :)
One of the great experience of mine was to use React and GraphQL on 2 projects.
Market demand is kind of moving us towards that direction but truth is i still miss Angular. 😔
I hear you. I started with React, went to Angular, now find myself working with React again. They're both good for different reasons
Fireship yeah, as long as your team has solid code ethics.
Angular kind of forces you to stay in a bound and react doesn’t. So easy to mess it all up.
@@Fireship speaking about that, do you have any plans on making videos about React (or even Vue)?
I agree Saad! My company where I work uses React but I was an Angular fan boy :/ . I won't lie JSX is really the bees knees. I think Angular is better than React + Redux though.
Me: "Hmm, I need to do that homework about Graphql"
RUclips: "Take this video from Fireship, with it's amazing explanation, content, and examples"
Can't we launch a rocket through this API?
😂
Unfortunately, Elon is too selfish for that: you would need a paid subscription of millions if not billions of dollars for that 😞
Can you read my mind? I just wanted to learn about GraphQL.
Perfect timing :)
same xD
hey, in 7 months (since the your comment was added) how was your learning with GQL?
@@Fireship or is it? **suspicious**
It's the RUclips recommendation algorithm.
Love the JRE Elon clip in the beginning lmao!!
Wow that was much input ... I never really looked at Angular, Typescript and anything like this.
Please make video on how you learn so quickly. share your insights on how we can learn and develop like you share your tips and tricks for fast learning and how you able to do so many things altogether share your thought with us
thank you .
This was super good, but I'd have appreciated it if the other frameworks used would have been listed somewhere in the description, or mentioned in the beginning of the video. I have no experience with typescript or angular, which made the whole thing a lot harder to follow, and had I known beforehand I could have found a video focusing more on either vanilla js or mern. Still, awesome content!
Nice! The graphql code generator looks extremely useful!
Technologies I believe hold future potential:
Next.js, Svelte, GraphQL, WASM (and Rust itself)
Thanks a lot that was so helpful ans easy to understad for me as graphQL biginner 🙏🏾
Your tutorials are jus awesome.
The information you provide is exactly what we need.
You are a great mentor and teacher.
Always waiting for your new videos.
Take a look at postgraphile. It'll set up your graphql end based off of your postgres db. No need to write any resolvers your self and it's blazing fast.
Very simple and easy to follow. Thank you so much!
This was pretty great, could you also maybe do one for the backend? Maybe Firestore + GraphQL? That would be pretty sickkkk
Yep, that is up next!
Nnnnope. I don't want to code even a single line of this. And I've been coding for over 3 decades. Yeah, call me old, but we've made life so fvcking difficult with all of these APIs just to do what should be a very simple thing. We now have a development culture that takes great pride in this overcomplexity as if it's some kind of worthwhile accomplishment or badge of honor. However, it's all just some things that others have stacked on top of other things... a series of Band-Aids over a core wound. The end result? Programmers today are faster to experience burnout and stress, feeling like they need to know all of these APIs which will be "dead" in a few years. Hell, there are already so many videos touting the death of GraphQL!!! This is shear madness.
I really want to learn gRPC, please do that one next!
I just recently did something similar with the space x api. Great video thanks for sharing.
Great vid, loved the sandwich analogy! Super helpful
Clear and concise as usual! Thanks your this great content!👍🙏
Now make one with Blue Origin Api
I would love an AWS amplify tutorial
actually it works better than i expected ... thank you
LOL , best chanel ever I've learned a lot of this channel
I wish you'd cover other languages or frameworks besides JavaScript. Regardless, still a great vid.
This is how teaching is supposed to be
wow a lot of steps. But the tutorial it's great!
perfectly explained! Thank you so much!
Your transitions hurt my eyes in a good way
Cool. Could you also make a video about the back end of this
been waiting on you to make this one! thanks
The Future is Now!
Sir gone to mars after teaching us graphql 😬
Please make a vedio on Plotly and Firestore
excellent
Hi Jeff, i discovered you today, you are amazing man! your video editing is also amazing, which program do you use for those effects ? and where do you find the icons ?
Mate, as a straight male frontend dev, I think I’ve fallen in love with you. Hope that doesn’t gross you 😂
Zookeeper in 100 seconds! Please.
Was expecting rocket science but got hungry
this guy knows his shit.
Fireship scares the hell out of me sometimes.
R.I.P got me🤣
Cool Stuff
great vid. you mentioned Apollo being a state management - on fetching a specific launch detail will it check for its existence in the list before sending a new request to the server?
Great video! I'm having an issue and the HTML file for launch list and details wont compile correctly. it gives an error because if the ngcontainer. I had to put the ng container myself and it was already in the file. Where did I go wrong?
Why this example for REST? ... It is not equal to the GraphQL example. I mean - in REST you can request `/sandwich` and you can get JSON in response where you'll have properties bread, ham and cheese.
Furthermore - the GraphQL can be as shitty as the REST example you provided - you can make three different requests for `bread { ... }`, `ham { ... }` and `/cheese { ... }`.
...
Good video, but the examples were not identical and you've shown yourself as very bias here :) ... and this could mislead someone who's new to APIs.
I just thought I was the only one with this opinion
I think the example is perfectly fine for trying to demonstrate it. If you want to separate properties to make the requests more dynamic, you have to provide multiple different requests in a REST API. With GraphQL you only need to provide one request containing what properties you want to get back. Saying you can do it the same way as a REST API is silly. Of course you could do it the same way, but the point is that you can get the flexibility of specifying what information you want for a sandwich without separating the information into multiple requests like you have to in the REST API example.
I see the problem now. You've assumed that the ham, cheese, and bread that makes up the sandwich is information that is always being requested. The point of separating the bread, ham, and cheese into separate request calls is because on the front end it may be the case that the person only wants to know what type of bread the sandwich has. In which case if you were to have all the information inside a single request '/sandwich' you are sending unnecessary information to the user and that is inefficient. The way GraphQL works is that the single request 'sandwich { bread }' would give the person only the bread. For a REST API the only way to do this is to make a '/bread' request. Essentially, if you want a single pieces of information you will have to create a request for each of them individually. That's why he showed this example. With GraphQL you can specify single or multiple properties in a single request.
If I want to know what type of bread and what type of cheese is in a sandwich then that's a single request in GraphQL sandwich { bread, cheese }. It is two in REST which would be '/bread' and '/cheese'. '/sandwich' is only useful if you want all the information about the sandwich.
@@DBZM1k3 I'm starting to see the idea :)
But at the same time - I guess you can do the same with REST, no? Have an endpoint where you can pass the props you want to get and you will get only the info for those props ... ?
@@peterveliki7918 it would be possible, yes. But out of the box this isn't possible with REST as it wasn't designed with that sort of flexibility in mind. You would have to develop a flexible framework around the already existing api. The simplest way I can see to implement it would be to include a string in the body of elements you want to pass back. Maybe as comma separated values? And then parse it that way.
That wouldnt look as clean as the GraphQL implementation however. And it certainly wouldn't be as flexible as GraphQL though as you can include additional things like sorting, filtering, and limiting data. GraphQL can have nested data, from a 3rd party source(Like it was done in this video) or other collections in your database, as well. Which would be even harder to implement in REST unless you modify it a bunch.
You can see in this video it was very easy to have his own GraphQL query SpaceX's graphql api. They can be stacked pretty easily.
Wow.. so early.. 1 view, 0 likes..
Gold 🥇
Sad that the space x Heroku app is no longer working
samjh me nahi aaya pr sunne me acha laga... did not get it but sounds good.. 🤣
Ok so we're talking about how useful this query language is for linking front end to back end. But in my own narrow practical experience, it seems no different from mysql. When you're developing back end code in a certain language, all of the graphql queries just end up being strings. So how can I link this "language" to my own back end code in a more practical manner that doesn't just involve string interpretation? (I'm working with python for those curious)
What do you think about using jest, and angular these days? I've been using it at work, and it's wayyy better than the stock karma/jasmine combo it comes with
Instant click on all Fireship vids
2:30 REST Resource Expansion allows 1 request to be made. For the sandwich example, a request could be made to /sandwich?expand=.bread,.ham,.cheese. Here is a talk about the part of ReST that is usually not followed youtu[.]be/g8E1B7rTZBI
Nice video! But i don't get why in a rest environment i should send multiple requests to different endpoints... if the object/record/whatever is made up of the same properties and i know the object/record/whatever i am asking for, why shouldn't my rest app return all in one as with the graphql counterpart?
Thanks for who will answer :)
Why does initialising an observable in the ngOnInit() method throw an error?
Angular & GraphQL = future of robust apps 🤔
I was thinking what if we can use SpaceX API to launch rockets to space.
Sorry, I've chosen gRPC instead.
petition to pronounce GraphQL like the word "graphical"
I think I get insterested with this GraphQL, however still confused how to integrate it to the backend with Mongodb, is it possible ?
ruclips.net/video/ed8SzALpx1Q/видео.html
What icon theme u use?
Hi , bit late to the party but I have a question ,
in the apllo.config.js file , we add a service right , in this service does the name has to be "angular-spacex-graphql-codegen" ? Or is it just a sample name (could be anything) ?
I am trying to convince peeps at my new job to start using GraphQL. They are big on Entity Framework. Do you still need Apollo (or any GraphQL) on top of EF?
You can still use your ORM, but instead of REST endpoints you would create graphql resolvers. Apollo is not required, but it provides consistent framework especially when used on both the client and server.
I don't get how this is different from sending a json rest api request
You had me up until angular.
Great, now I’m hungry and confused
RIP Spacex API is now down
how to call graphql server to graphql server ?
Нихую не понял, но очень интересно)
01:38
10:30
0:28
i am HERE :D
first
Silver 🥈
Still GraphQL is overhelming AF
"If you are a front end then everything is easy and f*** backend developers with the black magic they have to do now"
Am I the only one that can barely keep watching because of the constantly moving background?
:
You lost me at "Angular"
Please avoid food-related analogies... makes me hungry
DUDE! This is not technically correct! Nobody fetches "a sandwich" in 3 requests. That's why there are DTO types. Which in case of TS back and frontend can also be shared, to give exact typed communication between the two. Please don't mislead beginners with uncorrect information.
No. He is correct! The reason it is done this way is to allow flexibility of the information provided to the frontend. If you only want to know what type of bread a sandwich uses you can't get that information from '/sandwich' without also getting ham and cheese. That is costly as you are sending more information than necessary.
In the example of GraphQL you can specify 'sandwich { bread }' to only get the bread type of a sandwich. Do you see why it would be useful in REST to make several requests now?
This is the first video of yours where I strongly disagree with the simplified explanation.
"a consistent way for your frontend to request data from your backend despite any difference in the programming language"
HTTP Restful protocol does the same thing, as does any other protocol. Frontend and backend don't have to be using the same programming language in any scenario.