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

Подписаться 207 тыс.

Просмотров 22 тыс.

50% 1

Best Tech Resume Template: papermoontech.com/pmcsrtk/pedro
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-weather-api.herokuapp...
Code: github.com/machadop1407/Graph...
-
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/learn/reactjs-pr...
💻 PedroTech Discord: / discord
-
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Twitter: / pedrotech_
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/machadop1407
Email: machadop1407@gmail.com
Tags:
- Apollo Client
- GraphQL
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial

Наука

Опубликовано:

17 янв 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 49

@samithawijesekara 2 года назад

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

@chantelpunt5698 2 года назад

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 2 года назад

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!

@harmmeijer6582 2 года назад

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.

@brendagalindo9300 2 года назад

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

@lawrenceogun389 2 года назад

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

@pegihr 3 года назад

My first time hearing graphQL. Thank you for sharing

@PedroTechnologies 3 года назад

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

@DM-vn7bl 2 года назад

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

@soltiscd 3 года назад

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

@PedroTechnologies 3 года назад

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

@erlensgadzans3903 3 года назад

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?

@marioelkareh4562 3 года назад

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 3 года назад

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!

@mustaneerhaider515 2 года назад

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.

@ejikechiboka1863 2 года назад

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

@nahomd9797 3 года назад

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

@khandoor7228 3 года назад

Great video, I love the techs used.

@PedroTechnologies 3 года назад

Glad you enjoyed it! I love GraphQL too!

@aksharamishra1942 Год назад

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

@richardsangohil 2 года назад

Awesome one thanks a lot for this video

@usmanmughal5916 3 года назад

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

@PedroTechnologies 3 года назад

Good to hear! If you are a complete graphql beginner I recommend watching this two videos first: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Dr2dDWzThK8.html and ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YyUWW04HwKY.html

@user-wn7et1ft9j 2 года назад

amazing video. thank you so much pedro

@user-wn7et1ft9j 2 года назад

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

@huythe3170 2 года назад

Thanks

2 года назад

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

@sameer9641 2 года назад

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

@marale72 3 года назад

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 3 года назад

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

@marale72 3 года назад

@@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 2 года назад

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

@mod_123_ 3 года назад

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

@PedroTechnologies 3 года назад

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 3 года назад

It can be used in any website!

@timbr1279 3 года назад

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 3 года назад

Yes! SHould make a firebase tutorial soon!

@juancamacho479 3 года назад

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 3 года назад

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

@user-gq1rz2nl4j 3 года назад

@@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 2 года назад

@@user-gq1rz2nl4j 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