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

Best Tech Resume Template: papermoontech....
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!
API: graphql-weathe...
Code: github.com/mac...
-
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/l...
💻 PedroTech Discord: / discord
-
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Twitter: / pedrotech_
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/mac...
Email: [e-mail]
Tags:
- Apollo Client
- GraphQL
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial

[@chantelpunt5698]

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

[@PedroTechnologies]

Good point! I remember when I learned apollo v3 it was impossible bc there were no videos online lmaoo Im going to change the title!

[@soltiscd]

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

[@PedroTechnologies]

Thank you! I talk about mutations in my other 2 graphql videos, but I 100% plan on making more in depth videos!

[@nahomd9797]

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

[@marioelkareh4562]

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 ❤️

[@PedroTechnologies]

Really glad you are liking it! I actually don't have experience with WordPress. But I enjoy react native a lot so maybe a series is coming soon!

[@timbr1279]

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 !

[@PedroTechnologies]

Yes! SHould make a firebase tutorial soon!

[@mustaneerhaider515]

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.

[@erlensgadzans3903]

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?

[@usmanmughal5916]

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

[@PedroTechnologies]

Good to hear! If you are a complete graphql beginner I recommend watching this two videos first: kzbin.info/www/bejne/eqOVlXeNr7mbgZo and kzbin.info/www/bejne/j6q4iIpmaa2qgbs

I'm watched.Very cool video.Thanks you bro.But ı'm understand query and mutation in graphl

[@sameer9641]

it's giving me a 400 error that means API is not working currently.

[@aksharamishra1942]

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

[@mod_123_]

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

[@PedroTechnologies]

I believe that REST is easier, therefore I would say that you should use REST to learn a backend framework like express, then learn a database, then learn graphql.

[@PedroTechnologies]

It can be used in any website!

[@marale72]

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 🙏

[@PedroTechnologies]

Hey, if you can do it in the playground it should be the same in react! Did you manage to work it out?

[@marale72]

@@PedroTechnologies Hi Pedro! thanks! I spent the entire day to solve it. I asked on stackoverflow, discord, but nobody had the answer. I finally got the solutions on stackoverflow, someone with the same issue but he had to answered himself. The issue was than the query had config options. The config was refering to an Input ConfigInput with two parameters and each one to differents Enums. So finally I could resolve how to write and pass the variables into the query on React. query getCity($id: [String!], $config: ConfigInput) { getCityById(id: $id, config: $config) { .... } and then in the variables variables: { config: { units: 'metric', lang: 'sp' }, }, });

[@DM-vn7bl]

@@marale72 Hi! I know this was a long time ago, but could you share your code? I'm not sure where it's supposed to go. Thanks!!!

[@pegihr]

My first time hearing graphQL. Thank you for sharing

[@PedroTechnologies]

Glad you like it! GraphQL has a great potential of being the future!

[@adeyemiadetomiwa6231]

Thanks for this video, the API is not working again

[@icoffeebeen]

today i learned there's a city called Rome in the US

[@ghazankhan528]

you never used the http link that you imported

[@DM-vn7bl]

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

[@lawrenceogun389]

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

[@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. 🙏🏻♥️😍

[@ejikechiboka1863]

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

[@brendagalindo9300]

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

[@harmmeijer6582]

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.

[@huythe3170]

Coooooolllll

[@juancamacho479]

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

[@PedroTechnologies]

Can you paste your code here so I can take a look?

[@АндрейСикера-ы6ы]

@@PedroTechnologies same situation here, app just coninues to fetch the data when you change the input value (without clicking the button). It seems as if after getWeather function is called it just doesn't stop running.

[@tirthajyotighosh696]

@@АндрейСикера-ы6ы It seems you need to pass the "variables" to the "getWeather" query function instead of in the "useLazyQuery" hook. Like this: const [getWeather, { loading, data, error }] = useLazyQuery(GET_WEATHER_QUERY); // Remove the second argument of the hook ... ... ... // Pass the object containing the variables object inside "onClick" getWeather({ variables: { name: city } })}>Search

[@glebpolyakov6901]

@@tirthajyotighosh696 thank you so much brother

[@tirthajyotighosh696]

@@glebpolyakov6901 My pleasure 😊

[@richardsangohil]

Awesome one thanks a lot for this video

[@huythe3170]

Thanks

[@user-wn7et1ft9j]

amazing video. thank you so much pedro

[@user-wn7et1ft9j]

i can't describe how good this is! so easy to learn this way. thank you again

[@khandoor7228]

Great video, I love the techs used.

[@PedroTechnologies]

Glad you enjoyed it! I love GraphQL too!

[@venkatapenumatsa3959]

Just Subscribed

[@PedroTechnologies]

Thank you!