GraphQL With React Tutorial - Apollo Client

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/mac...
First Video: • GraphQL Tutorial Begin...
🌟 Learn Programming Fundamentals on Brilliant: brilliant.sjv....
-
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/l...
Please leave a comment on what topic you guys want me to cover next!
-
📞 Tutoring Session: www.fiverr.com...
💻 PedroTech Discord: / discord
-
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Twitter: / pedrotech_
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/mac...
Email: [e-mail]
Tags:
GraphQL
Apollo Client
Apollo Server
ReactJS Tutorial
ReactJS and MySQL
NodeJS Tutorial
API Tutorial

[@umutacer01]

I haven't seen any video like that which's telling everything in detail and simple. I really appreciated. Thank you!

[@PedroTechnologies]

Thank you so much! I am really happy I was able to help!

[@jimmycarrera5713]

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.

[@hectorserrano9314]

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!

[@PedroTechnologies]

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!

[@denissemendoza3862]

Such great content, as usual. You explain at a beginner level without the need of so much jargon! Keep it up!

[@PedroTechnologies]

Thank you! Really appreciate the support!

[@RenatoRaeffrayBarbosa]

Thanks!

[@PedroTechnologies]

Thank you so much for the support!

[@TheMeepPlay]

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.

[@diegogallardo8281]

I love you, I was trying so long to render my content to screen without Apollo and finally gave in and this worked

[@soltiscd]

Keep pumping out the good content. Exactly what I needed!

[@PedroTechnologies]

Thank you! Glad to hear it!

[@soltiscd]

@@PedroTechnologies I have seen the npm of @apollo/client and Apollo-Client... what is the difference?

[@red_gandalf_chegando_atrasado]

The tutorial to rule them all!

[@PedroTechnologies]

THank you so much! I am really glad you liked the tutorial!

[@dominiclapitan8466]

Thank you for this! I'm recently learning how to use the Apollo client and your video is perfect. Great content! Subscribed :D

[@PedroTechnologies]

Glad you liked it! Thank you for the support!

[@peerfunk]

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!

[@PedroTechnologies]

Glad I was able to help! Thank you for watching!

[@abcefg1845]

@@PedroTechnologies jxdfnlskdnvlskdm

[@tonyhaddad7153]

one of the best tutorial makers !! keep it up mate

[@PedroTechnologies]

Glad you think so! Thank you!

[@andredesantana2188]

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!

[@PedroTechnologies]

Thank you so much bro! Really appreciate the support! Your name makes me think your from latin america, are you Brazilian as well? hahaha

[@andredesantana2188]

@@PedroTechnologies Yes I'm! But I live in Canada!

[@zurazura309]

​@@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)

[@romimaximus]

Yeahhh....😎🤘🤘..thankx for sharing Pedro....another awesome video..!!

[@PedroTechnologies]

Glad you enjoyed it!

[@EdgarVicent]

Excelent video. I watched at 1.5X and is priceless. Thanks!

[@PedroTechnologies]

Awesome, thank you!

[@Vijaykumar-uy3gs]

Pedro's savage. Loving your work brother. Wow❕

[@mauriciomarin5599]

Dude you are the man! Clean and concise

[@jikol9631]

7:01 - This is where I lost it, good job

[@egzbel4400]

This is the recipe. Easy to follow. Thank you man!

[@tonymore3904]

you are amazing pedro dom.

[@PedroTechnologies]

Thank you!

[@kushalbansal5508]

Thanks Pedro for making this so easy to understand!

[@berakoc8556]

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.

[@osyopans]

Legal Pedro. Espero que tenha muito sucesso com o canal.

[@PedroTechnologies]

Obrigado!

[@bhargavpandya9189]

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 :)

[@PedroTechnologies]

Im preparing a GQL series that im releasing next week :) it will go a lot more in depth

[@bhargavpandya9189]

@@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!

[@BobbyBundlez]

so frickin good. great starter vid

[@PedroTechnologies]

Thank you!

[@funnyanimalworld7579]

you are explaining all this really well for me ,thank you.

[@mwnkt]

I love you videos , please keep making more

[@PedroTechnologies]

Will do :) Thank you!

[@moha_linus]

u made it look so easy bro thank you very much

[@PedroTechnologies]

Thank you! I am glad I was able to help you!

[@magicfibre]

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!

[@umairzafar5205]

Loved it man !!!

[@RenatoRaeffrayBarbosa]

Great introductory, down to earth. Thank you.

[@ib6548]

This was super helpful! You made it look easy!

[@ahmedelgaidi]

Thank you, man Very Helpful

[@EduardoDiniz4]

Great video!

[@swet_1997]

Thx bro, you are explaining everything like you should. Liked and Subscribed :)

[@riantritiyanuar9237]

Bro, you helped me a lot! Thank You!

[@pcgs_]

Muito bom o tutorial!!! Não é atoa que todo Pedro é desenrolado!! Valeuu

[@IamSH1VA]

Nice tutorial 👍 Thanks 🙏

[@PedroTechnologies]

Welcome 👍

[@mwaqas649]

Really appreciated ❤

[@mohanr6487]

Great video, callback function for createUser? To make sure new user got added successfully or not.

[@novudusomasekhar702]

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?

[@abdullahmoamen9227]

great video thanks pedro

[@nakjemmy]

Very helpful tutorial!

[@favourbawa5520]

This was amazing, thank you very much!

[@PedroTechnologies]

Glad it was helpful!

[@esotericrhythms9696]

This is very helpful :) Thanks.

[@sai_charan]

Thank you, Pedro!

[@PedroTechnologies]

Thank you for watching!

[@yigitruzgaruzun7289]

Thanks. Please continue to Apollo

[@PedroTechnologies]

Will make more videos!

[@emeken]

This is awesome!

[@PedroTechnologies]

Glad you liked it!

[@kinoshan591]

Thank you for the tutorial ❤️

[@PedroTechnologies]

Thank you so much!

[@silvesterwali6565]

this is amazing bro

[@PedroTechnologies]

Thank you! Glad you liked it!

[@05forn]

Hey pedro, for someone who is beginning their self taught journey could you please provide a roadmap and some resources. Love your videos bro

[@PedroTechnologies]

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!

[@05forn]

@@PedroTechnologies thanks!

[@blender_wiki]

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.

[@wladmyrmachado2333]

Awesome!

[@PedroTechnologies]

Thanks! kkkkkk

[@johnreyasong895]

Thank you for this Sir!

[@dariashaulko4867]

How to use Graphql query with class components in React?

[@zubinmukherjee1020]

great work ! Thanks

[@PedroTechnologies]

Glad you liked it!

[@fatmajrad3394]

Thank you so much

[@EnjoyClassicalMusic]

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^^

[@PedroTechnologies]

Material Theme :)

[@EnjoyClassicalMusic]

@@PedroTechnologies I have extended it~ thank you so much^^

[@jmysabbagth8151]

Great tutorial

[@PedroTechnologies]

Thank you!

[@MasharipovSaidbek]

nice!

[@okeyshourovroy2769]

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?

[@arwysyah2400]

Hei bro , nice ,,,, you explain about that super clear

[@PedroTechnologies]

Thank you so much 🙂

[@irakli.asatiani]

did you really want to have those internal state with just listing the data? in fact that hook should have been automatically trigger updates.

[@iridium-x7i]

kkkk excelente video bro.

[@jeremyflowers8908]

26:48 You could define input type to avoid duplication

[@champong00]

They called it Backtick ``, It is use when you want to write multiple line.

[@faiqhacili7504]

You are great thank you!

[@offer_discount]

very nice tutorial

[@kevinavignon4335]

What are the VS Code extensions that you are using?

[@comod]

19:54 this is why you should use typescript

[@keithcarrillo8238]

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?

[@PedroTechnologies]

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!

[@keithcarrillo8238]

@@PedroTechnologies Oh ok Thanks Pedro!

[@INfoUpgraders]

Very helpful

[@PedroTechnologies]

Glad you liked it!

[@anchalsrivastava9763]

Thank you :)

[@PedroTechnologies]

No problem 😊 Glad you liked the video!

[@AmanVerma-ci3kg]

Unable to pass mongodb _id to mutation , It's not supporting 32 signed bit

[@jasonhackson2805]

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.

[@michaeltrew8102]

What happened to last name in the API? was it just not hooked up?

[@PedroTechnologies]

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!

[@jackdo6594]

Nice content

[@Pilosofia]

We need video from catching and state management in apollo client

[@PedroTechnologies]

I want to make one!

[@rubberclay]

How can I solve CORS problem in 17:00 ?

[@justinsengweb-per70]

where edit do you have brother?

[@nanonkay5669]

The set up looks more complicated than usual. I thought the useQuery hook already dealt with error handling and all that.

[@Believer09_29]

Well explained, thanks for this amazing video. 👌👌

[@PedroTechnologies]

My pleasure 😊

[@dylanarveson9594]

* notices port number * Nice.

[@mehmettemell]

good content

[@PedroTechnologies]

Thank you!

[@blizzardking1320]

No merch!?!??

[@yogeshsharma8966]

Can you please share your json data file, or api

[@little01giant68]

how to get one user (use to id)

[@candycane55]

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

[@PedroTechnologies]

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 :)

[@selfather]

good tutorial

[@Shellflower1234]

Wowww

[@usmanmughal5916]

how to use context with it?

[@OcasoND]

Thanks

[@sayyedirfan6766]

Nice

[@pedromanuelcamargomendez6520]

Gracias. buen aporte.

[@PedroTechnologies]

De nada! Me alegra que tu guste!

[@KevinEontrainer381]

The only thing I remember from this is the port number

[@HoNow222]

Please if you edit your code make sure to say it in the video!!

[@Dev-Phantom]

cool

[@oscararmenta3537]

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.

[@PedroTechnologies]

Can you post the error or gql response here?

[@apimpnamedflipflap]

​@@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 } } `;

[@oscararmenta3537]

@@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 KZbinr that cares and listens to his suscribers you're awesome!!!

[@youssefel-shabasy833]

how old are you ?

[@PedroTechnologies]

Im 19, turning 20 in 3 months!

[@assimez-zaky8363]

Thx so much, but if something is not important in the beginning just don't mention it, it confuses a lot, and get people leave the video

[@devindias9515]

strongly disagree.