GraphQL With React Tutorial - Apollo Client
Vložit
- čas přidán 17. 12. 2020
- In this video I will teach you guys how to use React as the client for your GraphQL Project. We will be using Apollo Client 3 to handle all the graphql requests to our Apollo server.
Code: github.com/machadop1407/Graph...
First Video: • GraphQL Tutorial Begin...
🌟 Learn Programming Fundamentals on Brilliant: brilliant.sjv.io/PedroTech
-
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/learn/reactjs-pr...
Please leave a comment on what topic you guys want me to cover next!
-
📞 Tutoring Session: www.fiverr.com/share/pw8RPY
💻 PedroTech Discord: / discord
-
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Twitter: / pedrotech_
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/machadop1407
Email: machadop1407@gmail.com
Tags:
- GraphQL
- Apollo Client
- Apollo Server
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial - Věda a technologie
this video literally saved my life. It's been a while since the last time I played with GraphQL and Apollo, and there are been some serious changes! I've been working for years with other things, and now that I'm applying to a new job, I had to pass a tech test, pretty basic stuffs but damn, I was struggling. Great work Pedro, thanks for this content.
I haven't seen any video like that which's telling everything in detail and simple. I really appreciated. Thank you!
Thank you so much! I am really happy I was able to help!
Such great content, as usual. You explain at a beginner level without the need of so much jargon! Keep it up!
Thank you! Really appreciate the support!
Dude, this was super useful, I subscribed to your channel. I appreciate that you'd create a tutorial to help people out even though you're pretty busy as you've mentioned. Thanks man!
Thank you so much! The positive support I get is pushing me to work as hard as I can to grow this channel! Really appreciate ur comment!
Thank you for this! I'm recently learning how to use the Apollo client and your video is perfect. Great content! Subscribed :D
Glad you liked it! Thank you for the support!
I love you, I was trying so long to render my content to screen without Apollo and finally gave in and this worked
Pedro's savage. Loving your work brother. Wow❕
Thanks dude with this video you kinda save me about 2/3 hours of documentation reading, dont really pay attention to bad comments this is obviously a beginner tutorial that serves its purpose by far.
Keep pumping out the good content. Exactly what I needed!
Thank you! Glad to hear it!
@@PedroTechnologies I have seen the npm of @apollo/client and Apollo-Client... what is the difference?
Dude you are the man! Clean and concise
Thanks Pedro for making this so easy to understand!
thank you for your work, have trying to get this to work for days with text based tutorials, you finally helped me out thanks man! Very clear, easy and straight forward example!
Glad I was able to help! Thank you for watching!
@@PedroTechnologies jxdfnlskdnvlskdm
Yeahhh....😎🤘🤘..thankx for sharing Pedro....another awesome video..!!
Glad you enjoyed it!
This was super helpful! You made it look easy!
Great introductory, down to earth. Thank you.
one of the best tutorial makers !! keep it up mate
Glad you think so! Thank you!
This is the recipe. Easy to follow. Thank you man!
Very good tutorial for beginners who are trying to understand GraphQL with React. Keep the good work Pedro. It's not easy to do what you are doing and sharing your knowledge for free is a very noble attitude! I subscribed to the channel and hope you can make advanced tutorial as well in the future!
Thank you so much bro! Really appreciate the support! Your name makes me think your from latin america, are you Brazilian as well? hahaha
@@PedroTechnologies Yes I'm! But I live in Canada!
@@andredesantana2188
Agree,
but I have one question,
So, I have to pass test - to get a job and I'm not familiar with that 2 ("GraphQL" and "Apollo Server") so I'm learning now,
I watched the first video and start 2nd, but... there is "missing" the part to install "React" along with that
(to make everything work together and connect).
as I see Folder and file structure first have to install React and then - in that folder install "GraphQL" and "Apollo Server", right?
Thanks in advance and Respect from Georgia (Country)
Dude you explained this so well! Thank you.
you are explaining all this really well for me ,thank you.
Muito bom o tutorial!!! Não é atoa que todo Pedro é desenrolado!! Valeuu
Great video Pedro! I would love a more in depth GraphQL and Apollo content... I don't mind long videos at all because you explain well :)
Im preparing a GQL series that im releasing next week :) it will go a lot more in depth
@@PedroTechnologies Thanks brother. There isn’t much content on GQL and Apollo out there. I really believe that this channel has great potential. Keep going and you will surely see growth!
Loved it man !!!
Thx bro, you are explaining everything like you should. Liked and Subscribed :)
Excelent video. I watched at 1.5X and is priceless. Thanks!
Awesome, thank you!
This was amazing, thank you very much!
Glad it was helpful!
Legal Pedro. Espero que tenha muito sucesso com o canal.
Obrigado!
Bro, you helped me a lot! Thank You!
Thank you, man
Very Helpful
great video
thanks pedro
so frickin good. great starter vid
Thank you!
Thank you, Pedro!
Thank you for watching!
thanks for this video! really, helps me a lot
u made it look so easy bro thank you very much
Thank you! I am glad I was able to help you!
I think using a normal variable instead of state in the component for transforming query data is a better approach. More state = more things to think about.
This is very helpful :) Thanks.
Great video!
The tutorial to rule them all!
THank you so much! I am really glad you liked the tutorial!
Great video, callback function for createUser? To make sure new user got added successfully or not.
I love you videos , please keep making more
Will do :) Thank you!
Thank you for this Sir!
Really appreciated ❤
Thank you for the tutorial ❤️
Thank you so much!
Very helpful tutorial!
This is awesome!
Glad you liked it!
you are amazing pedro dom.
Thank you!
Awesome!
Thanks! kkkkkk
Thanks a lot for this video, i have a question which is after user is created, how to call getAllUsers query to get latest user list?
nice!
great work ! Thanks
Glad you liked it!
Hey thanks for the video Pedro. I was wondering does your backend have to have GraphQL in order for your front end to use GraphQL as well. Or can my backend just simply return json data and my frontend can still use GraphQL?
Interesting question! I believe it would be possible however most frontend graphql libraries require you to have 1 single endpoint (the /graphql) endpoint. Hence I don't know how that would work!
@@PedroTechnologies Oh ok Thanks Pedro!
this is amazing bro
Thank you! Glad you liked it!
7:01 - This is where I lost it, good job
Nice tutorial 👍
Thanks 🙏
Welcome 👍
You are great thank you!
What are the VS Code extensions that you are using?
Wowww
Thanks. Please continue to Apollo
Will make more videos!
How to use Graphql query with class components in React?
kkkk excelente video bro.
26:48 You could define input type to avoid duplication
Thanks!
Thank you so much for the support!
28:23 Does it though? This looks like array destructuring, which doesn't care about names, only positions. While it's probably good practice to name them the same to avoid confusion, it doesn't have to be the same.
Apart from that little nitpick, thanks for making this video! It's a very nice introduction to the library!
While using apollo client in nextjs the cookie is not sending to the backend. Even after using cors in backend with origin and credentials true.
And in apollo client credentials true.
Still cookie not sending to the backend with request.
Can you please help out with a tutorial?
Hei bro , nice ,,,, you explain about that super clear
Thank you so much 🙂
Nice
Nice content
Really useful video
Glad to hear that
They called it Backtick ``, It is use when you want to write multiple line.
Thank you :)
No problem 😊 Glad you liked the video!
Great video, very competent tutorial, however Apollo is good for beginners or for a small project, in productions is better use a solution like Relay.
please can you do a tutorial on how to upload single and multiple files using react graphql apollo-server-express. will really be appreciate. doesn't have to be fancy.
I really love the colorful icon of your folder in project file tree. Could you tell me which plugin can do it in VSCode? thanks^^
Material Theme :)
@@PedroTechnologies I have extended it~ thank you so much^^
Well explained, thanks for this amazing video. 👌👌
My pleasure 😊
Great tutorial
Thank you!
Thanks
Very helpful
Glad you liked it!
Hey pedro, for someone who is beginning their self taught journey could you please provide a roadmap and some resources. Love your videos bro
Thank you! I've been wanting to make a video on a roadmap for a while now cause I remember when I started this confused the hell out of me hahaha Should make one soon!
@@PedroTechnologies thanks!
Gracias. buen aporte.
De nada! Me alegra que tu guste!
how to use context with it?
good tutorial
Unable to pass mongodb _id to mutation , It's not supporting 32 signed bit
Can you please share your json data file, or api
where edit do you have brother?
19:54 this is why you should use typescript
What happened to last name in the API? was it just not hooked up?
It is still there! With graphql i can specify what I want to see, so I just forgot to add lastName as one of the fields in the request, but in the json it is still there!
How can I solve CORS problem in 17:00 ?
how to get one user (use to id)
The set up looks more complicated than usual. I thought the useQuery hook already dealt with error handling and all that.
good content
Thank you!
We need video from catching and state management in apollo client
I want to make one!
* notices port number *
Nice.
Just a beginner question. Why do we actually need to something like apollo? We can call the APIs using fetch or axios as well right?
Sorry if that's a stupid question
It's not a stupid question hahaha I had the same doubt back when I started. You can use axios/fetch but its significantly harder/more annoying lmao. Cause the way you structure a gql request is very different from a way you structure a normal http request. I defo recommend a gql frontend library like apollo, most big companies using gql uses it :)
No merch!?!??
Please if you edit your code make sure to say it in the video!!
The only thing I remember from this is the port number
I already try everything, but for some reason not data is displayed: When I try to make the client reach the graphQL server it appears bad request, and the data as undefined tree times.
Can you post the error or gql response here?
@@PedroTechnologies I had the same issue when i was trying to do mutations. However my code was a bit different from PedroTechs and i was trying to query towards mongoDB.
Anyhow in case it helps anyone, this was my solution:
I put the query variables in an object ->........ createPost(name: {variables}) ........... and now it works, like so:
export const CREATE_POST = gql`
mutation CreatePost($name: String!, $title: String!, $description: String!) {
createPost(name: {$name, title: $title, description: $description}) {
id
name
title
description
}
}
`;
@@PedroTechnologies Oh I already solve it, it was just a typo mistake. Thank you so much for your comment is really good to know a CZcamsr that cares and listens to his suscribers you're awesome!!!
Clair
how old are you ?
Im 19, turning 20 in 3 months!
yeah map on an object? yeah...