GraphQL With React Tutorial - Apollo Client

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

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

[@RenatoRaeffrayBarbosa]

Thanks!

[@PedroTechnologies]

Thank you so much for the support!

[@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?

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

[@tonyhaddad7153]

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

[@PedroTechnologies]

Glad you think so! Thank you!

[@diegogallardo8281]

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

[@romimaximus]

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

[@PedroTechnologies]

Glad you enjoyed it!

[@alexxmde]

The tutorial to rule them all!

[@PedroTechnologies]

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

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

[@EdgarVicent]

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

[@PedroTechnologies]

Awesome, thank you!

[@mauriciomarin5599]

Dude you are the man! Clean and concise

[@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.

[@kushalbansal5508]

Thanks Pedro for making this so easy to understand!

[@Vijaykumar-uy3gs]

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

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

[@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.

[@egzbel4400]

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

[@ib6548]

This was super helpful! You made it look easy!

[@BobbyBundlez]

so frickin good. great starter vid

[@PedroTechnologies]

Thank you!

[@tonymore3904]

you are amazing pedro dom.

[@PedroTechnologies]

Thank you!

[@RenatoRaeffrayBarbosa]

Great introductory, down to earth. Thank you.

[@funnyanimalworld7579]

you are explaining all this really well for me ,thank 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!

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

[@mwnkt]

I love you videos , please keep making more

[@PedroTechnologies]

Will do :) Thank you!

[@osyopans]

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

[@PedroTechnologies]

Obrigado!

[@mohanr6487]

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

[@ahmedelgaidi]

Thank you, man Very Helpful

[@pcgs_]

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

[@jikol9631]

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

[@umairzafar5205]

Loved it man !!!

[@riantritiyanuar9237]

Bro, you helped me a lot! Thank You!

[@swet_1997]

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

[@kinoshan591]

Thank you for the tutorial ❤️

[@PedroTechnologies]

Thank you so much!

[@jeremyflowers8908]

26:48 You could define input type to avoid duplication

[@favourbawa5520]

This was amazing, thank you very much!

[@PedroTechnologies]

Glad it was helpful!

[@IamSH1VA]

Nice tutorial 👍 Thanks 🙏

[@PedroTechnologies]

Welcome 👍

[@abdullahmoamen9227]

great video thanks pedro

[@sai_charan]

Thank you, Pedro!

[@PedroTechnologies]

Thank you for watching!

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

[@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?

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

[@dariashaulko4867]

How to use Graphql query with class components in React?

[@valentinagomez9415]

thanks for this video! really, helps me a lot

[@nakjemmy]

Very helpful tutorial!

[@esotericrhythms9696]

This is very helpful :) Thanks.

[@mwaqas649]

Really appreciated ❤

[@johnreyasong895]

Thank you for this Sir!

[@yigitruzgaruzun7289]

Thanks. Please continue to Apollo

[@PedroTechnologies]

Will make more videos!

[@silvesterwali6565]

this is amazing bro

[@PedroTechnologies]

Thank you! Glad you liked it!

[@zubinmukherjee1020]

great work ! Thanks

[@PedroTechnologies]

Glad you liked it!

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

[@champong00]

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

[@arwysyah2400]

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

[@PedroTechnologies]

Thank you so much 🙂

[@EduardoDiniz4]

Great video!

[@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?

[@emeken]

This is awesome!

[@PedroTechnologies]

Glad you liked it!

[@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.

[@kevinavignon4335]

What are the VS Code extensions that you are using?

[@comod]

19:54 this is why you should use typescript

[@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.

[@Pilosofia]

We need video from catching and state management in apollo client

[@PedroTechnologies]

I want to make one!

[@faiqhacili7504]

You are great thank you!

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

[@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.

[@AmanVerma-ci3kg]

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

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

[@jmysabbagth8151]

Great tutorial

[@PedroTechnologies]

Thank you!

[@nanonkay5669]

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

[@rubberclay]

How can I solve CORS problem in 17:00 ?

[@blizzardking1320]

No merch!?!??

[@wladmyrmachado2333]

Awesome!

[@PedroTechnologies]

Thanks! kkkkkk

[@HoNow222]

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

[@offer_discount]

very nice tutorial

[@anchalsrivastava9763]

Thank you :)

[@PedroTechnologies]

No problem 😊 Glad you liked the video!

[@justinsengweb-per70]

where edit do you have brother?

[@yogeshsharma8966]

Can you please share your json data file, or api

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

[@iridium-x7i]

kkkk excelente video bro.

[@little01giant68]

how to get one user (use to id)

[@usmanmughal5916]

how to use context with it?

[@INfoUpgraders]

Very helpful

[@PedroTechnologies]

Glad you liked it!

[@dylanarveson9594]

* notices port number * Nice.

[@MasharipovSaidbek]

nice!

[@pedromanuelcamargomendez6520]

Gracias. buen aporte.

[@PedroTechnologies]

De nada! Me alegra que tu guste!

[@Believer09_29]

Well explained, thanks for this amazing video. 👌👌

[@PedroTechnologies]

My pleasure 😊

[@Shellflower1234]

Wowww

[@KevinEontrainer381]

The only thing I remember from this is the port number

[@jackdo6594]

Nice content

[@selfather]

good tutorial

[@mehmettemell]

good content

[@PedroTechnologies]

Thank you!

[@youssefel-shabasy833]

how old are you ?

[@PedroTechnologies]

Im 19, turning 20 in 3 months!

[@sayyedirfan6766]

Nice

[@OcasoND]

Thanks

[@tom_zanna]

Honestly, I disliked this video. From 4:00 to 9:00 you keep saying "if you are a beginner don't worry". In my opinion you should go straight to building a basic client and sending a query and then improve it with error handling and caching

[@PedroTechnologies]

Ok, no worries! I'm sorry you didn't find the video helpful. I have other videos where I don't show error handling, so If you want you can watch those too!

[@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.