Building a Weather App with React and GraphQL - Apollo Client V3 Tutorial

Use code: PEDRO for 20% off ^
In this video I will teach you guy the basics of GraphQL and Apollo Client using React. We will be using the weather API to make the api calls and configure everything!

-
-

Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Tags:
- Apollo Client
- GraphQL
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial

[chantelpunt]

Exactly what I was looking for. Since Apollo has made so many changes in v3, you should definitely put "Apollo v3" in your title. V3 tutorials are hard to come by right now

[soltiscd]

I hope you're able to go more in-depth with GraphQL and include mutations... Great stuff and thanks for sharing your knowledge.

[pegihr]

My first time hearing graphQL. Thank you for sharing

[harmmeijer]

Tip: In the console you can copy property path when you unfold data and right click on the property, this can prevent typos when you want to get a property out of a nested object.

[Utlendingur]

Nice video, thank you.
I am wondering, how can I receive temperature in celsius? In your example Vancouver has 277, 29, but as long as I understand, it should be 27, 7 or am I wrong?

[DM-vnbl]

@PedroTech Great tutorial! Thanks!
Just curious, why did you decide to build just one main component? Specifically, could you have moved the "weather" div to it's own component? I want to add some styling to the results, but I don't know how to pass the data once it's in its own component. Thanks!

[mod__]

When do you think would be a good time to learn graphql? Like what type of websites is it mostly used for?

[marioelkareh]

Hello Pedro I am so happy with your courses straight forward I will be so glad if you can make a tutorial about WordPress with a simple crud an react native with simple crud keep the good work and thank you In advanced ❤️

[mustaneerhaider]

bro if i have a graphql api with nextjs api routes and when initializing apollo client i passed it the url of the localhost which was during development but when im trying to deploy my nextjs project to vercel i don't know which uri to pass to apollo client as it is called inside getStaticProps for pre generating the dynamic pages so the url to which it needs to send request during deployment time is not known to it which is causing ma a problem in deploying it. I tried just '/api/graphql' but it didn't work.

[brendagalindo]

Hi I am from Mexico and your tutorial helped me to much!
thank You

[nahomd]

Amazing I've hot an error, It seems that useLazyQuery doesn' stop once every time the variable(State onClick) changes it will request a

[marale]

Hi Pedro! I have to build a weather app using this api but I have to change the language and the units. They are inside de config option but I've tried everything to bring them in React but I can't. I know hoy to make the query and pass the options in the playground but I can't make it work in React. Please help 🙏

[samithawijesekara]

Thank you so much for the valuable tutorial. This is exactly what I was looking for. Keep doing. You explained very clearly each part. 🙏🏻♥️😍

[juancamacho]

how do you stop the app from crashing when you delete the name on the input field after you have searched one city? I get an error: TypeError: Cannot read property 'name' of null

[ejikechiboka]

Hi Pedro, if you clean the name of the city instead of doing a refresh, it gives an error. Why is that so please?

[lawrenceogun]

@pedrotech Thank you for this tutorial, I really appreciate. The app only works on the first render though and stops on the second. I looked through the Apollo docs and found that you could instead easily parse {variables: {name: citySearched}} into the getWeather() state through the onClick function. That way, each button click produces a result.

[aksharamishra]

i'm facing one problem after removing input value api is rendering and it show none

[usmanmughal]

Nice timing I was going to learn grapgQL then ur video came :P

[timbr]

can you make a video about firebase bro, i really wanna know about this, i made one project in MERN and need to add authentication so i cant how to use it, we'll wait for the video. Good luck !

[wnetftj]

amazing video. thank you so much pedro