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

[Music] hey guys how's it going i'm back here with another video and today i decided to make this video basically introducing graphql for beginners however i'm gonna do this by building a very simple weather application where we're going to be using the graphql weather api that i'm going to leave the link in the description if you want to check it out it is very simple and it will help a lot of beginners who are trying to learn graphql how it actually works so we're going to be building everything in react and also the code is going to be in the description if you're interested you can just check the description it's going to be there so basically what we're going to do is i have here um a project a react project opened up here i deleted all the unnecessary files in my opinion and just left these four files over here which are the app.css app.js index.js and the reportwebvitals.js but they have absolutely nothing inside of them it's just how it starts right i just deleted some stuff but this is all you need so basically what we're going to be doing is we're going to be using the apollo client library to handle all the front-end api calls to our graphql so the first thing we actually have to do is we actually have to install um apollo client into our project so i'm going to come over here and i'm going to say yarn add at apollo slash client so if you're using npm you can just say npm install apollo client and we're also going to be using another library which is going to be actually the graphql library and that will cert will allow us to access all the different types type definitions that already exist in graphql so let's say yarn add graph ql and those are actually the two packages that we're going to be installing we don't need anything else and after this is installed okay we have this done i want to start my application um i'm going to open up over here let's see what happens and this over here is basically the the test right so if you've watched my video on graphql that i've made previously basically you can graph all comes with this kind of interface where you can test your api calls and the api that we're going to be using has this pretty nicely described as you can see right here what we can do is we can execute queries and i'm going to zoom in so you guys can see we can execute queries however we want and just get the information that like exactly the information we want so basically for example this is going to be a project where you're going to be have an input and you can basically enter the name of a cd and it's going to return all the way the current weather information for that city so in this case over here i i searched for the city of vancouver and i can literally choose what i want to receive from my api call so i wanted to receive the name the country and the weather and the weather contains all of this information so this is kind of how graphql works so if i didn't want actually to receive um the country i could just delete this and if i run this again you'll see that instead of saying contra ca it will actually say um nothing because we just told it not to give us this piece of information so this is one of the great things about graphql and we're going to be working with it throughout the video so our react app just opened up here so let's start inputting it some information that is going to be necessary the first thing that i really want to do is i want to create a page right just just the initial page but just for organization purposes i'm going to create a folder called pages and let's create our home page right obviously i'm not going to use routes i'm not going to worry about any of that this is just a simple component that we're going to be using to create our application and the reason why i'm doing it this way is because i want to show you guys how providers work so um i want to have different components inside of our apollo client provider so over here we have our home component and let's actually give this a class name so class name let's just call it home and inside of here we're just going to put some very simple jsx we're going to put not html we're going to put input a simple input of type text and let's put a placeholder just so it looks a little bit better and it's going to say city name like this and let's close this let's save it i'm going to zoom in so you guys can see it better but basically i just created an input i'm gonna put a header over here saying um search for weather this looks weird but i'm gonna just this is just gonna be very simple nothing too hard and then we're gonna have a button over here that is gonna say search and we're gonna handle the on click for it later but currently this is all we need for refreshment page over here we can't see anything obviously because we actually haven't imported this component and called it in our app.js so that's exactly what we're going to do right now if we come over here and say import um home from and we can put over here dot slash pages slash home and then just come over here and say home like this then now we are able to see our home component appear in our screen it obviously doesn't look good but we're not going to care about it at least for now so what happens is we're going to call this component over here and with graphql we have to basically wrap around all the different components that we want to make api calls with a apollo client provider which is not for graphql as a whole but if you're using this library for for making the api calls we have to do it this way and how how exactly do we do it is basically we'll have to come over here and first of all i'll create a folder called graphql and that's that's just something that i like to do but you don't exactly need to do it this way you can put all of your queries and mutations wherever you want but basically what happens with graphql is you put all of your queries for your back-end for your api calls in the front-end so you can change that as you go it's differently from when you're when you're doing like a a rest api call because uh with that you need to define everything on the back end and you just make the request and you receive the data right but with graphql is a lot more dynamic which is great for us so that's why we're going to have this folder over here but we're not going to touch on it right now we're actually going to start building up our project so that it accepts graphql into it so how exactly do we do that well the first thing we need to do is we need to import some packages over here at the top so the first package that we're going to import is actually going to import a bunch of stuff from apollo client so from apollo client and the things that we're going to import are very simple we're going to first of all import the apollo client object over here then we're going to import something called in memory cache and i'll explain what it means when we get to it but then we're going to import the apollo provider and i'm gonna save this just so we have some styling and then we're gonna also import the http link and it's gonna make more sense as we go through but these are the packages that we're going to have to import and what do we do now well now we have to actually set up our application what happens is with apollo client you have to wrap your whole like where like all the components that you want to have access to making this api calls making the queries the mutations well you have to wrap it with a provider so so we can just come over here and very simply just write wrap this around with an apollo like this and we'll also put this down here mini apollo provider and the only thing we have to do is we have to pass into here a client now let me see guys what this client means so how exactly do we create this client variable so to do that we're going to come over here and we're going to say const client and it's going to be a new apollo client and we can pass an object inside of here which is going to contain the different pieces of information that we need to pass in order to actually create our server so what do i mean by that well first of all we we have by default we have to define how we're going to cache our data and since this is a very small project and caching won't be like important we can just um say that this will be cached in memory cache so you can say in memory cache and this is just going to fix and like handle everything for you directly so this is what i recommend especially in the beginning so what else do we need well we need to pass our uri and what exactly is the uri well uri is just the link for our api and i just realized that we don't actually actually even need this because we're going to get from a public api so we can just pass the link for our api inside of here and it should work so let me come over here i'm going to grab this over here this whole api endpoint over here and i'm just going to paste it inside of here so that he knows that this is where we're going to be fetching our data from and now that we have actually created our client we could just copy this over here and paste it over here which basically tells our our whole project our whole provider that this is actually where we're going to be making our api calls and now we're actually ready to start writing our our actual graphql code so what happens is um when you're using apollo client and you want to make a query there's the most common fun a hook called use query and it's probably one of the hooks that you're going to be using the most which basically what it does is you just tell it like you pass a graphql query into it and it just queries the data like when you enter the page when you load the component but that's not exactly what we want here because we want here to load the data when we click on the button right so if i come over here we only want to let me refresh this we only want to actually load the data our search for the weather when i click on this button so we're going to be using actually a different hook which is also from apollo client which is very common and it's called the use lazy query and if you if you are beginner and you've never used use query before don't worry both of them are exactly the same the only difference is that use lazy query is a hook which can be called when use query is a hook that happens when you basically loads your component right so if you're interested in learning more about the different hooks i have different videos on where f2l so i'm going to link them up here in the video but basically let's start implementing this the first thing that we have to do is actually start writing our graphql code and what do i mean by that well this is what i consider graphql code this over here is a query you can define it as a query and then you define a function and it might have like you can have arguments it can just be a normal function and inside of here you can list all the different information that you want to query and this is how graphql actually works and we have to follow this structure right here because this is how the public api defined it but if you were working and creating this graphql api from your backend on your own um then you would be able to define the name of the function you would define what information you're sending but in this case we have to basically follow this structure right here so what i'm going to do is i'm actually just going to copy this because this is exactly what we need and i'm going to come here to our graphql folder and i'm going to create a file called queries.js and inside of it we're only going to write graphql code and we're going to export all of our queries that we want to have in our application so basically to do that we have to import graphql from apollo client so my keyboard is kind of bad but apollo client oh i just forgot that we have to put this okay apollo client and graphql is just a variable defining that we're going to actually write a query or a mutation in graphql so here we're going to write all the queries that we're going to be using throughout our application so it's not going to be something specific so we just want to export every single query so for every query that we create we want to create a variable and we just want to export it so in this case we're going to call it let's give it a name for this query let's call it get weather query something like this getweatherquery and in order to actually write your query you have to write graphql and i know this is weird but you have to put the the backticks this this kind of quotes over here i'm gonna try to zoom in so you guys can just see it it's you literally just have to do it like this and you write your query in between those i know i hate this but this is how graphql works it's how a lot of different libraries work but basically we have to write a query inside of here so since we already copied our query we can just paste it over here and this is basically what we're working with however we still have to make some changes because you can see that over here we're defining vancouver directly into our code when it's not actually what we want and what exactly we want here is first of all we need to define this as a type and what do i mean by that is inside of here we have to define this as a string and if you don't know the syntax over here it's because this is how you actually define types in graphql um i have videos as i mentioned before that go a lot more focus on this however since we're not actually creating a graphql server we're just following the format that an a public api created for us so we don't actually need to worry a lot about this we don't actually need to worry at all but just know that we know that name is a string right because name is a it is a string we need to put the name of the city so we sh we have to just say that name is a string like this and it should be fine but we actually have to change it a bit just just to fix it because it is a bit different using apollo client to make your graphql calls and just using the graphql kind of gui that they allow us to to test our graphql server it's a bit different what we have to do here is first of all we're not going to use this curly brace over here we're just going to do it like this put query and then the name of the function for the query so we can just delete this over here and then inside of here we still need to write one more thing we need to write get city by name one more time and then we have to say that we want name to be equal to um the same as a name property and why do we do this well to be completely honest i don't know why the syntax is like this um it's something that i had i was a lot i was very confused especially in the beginning however don't worry what this basically does is we're just saying that and i'm just organizing this we're just saying that we want to first of all make a query to the function get city by name um it takes one argument which is name and its type is string and then inside of it we're calling the function that exists called get city by name and for the name we're passing the same type as name this is the idea right this is i believe the easiest way i can explain it but basically i know it's weird but don't worry you're gonna get it definitely um so let's actually just start um fixing this this doesn't matter the like the the kind of the indentation but let's just okay let's just leave it like this i know it looks ugly but this is the code that we have to write and this is actually our graphql query done the only thing we have to do left is just add a final curly brace because we added this one over here and i hope it's all correctly combined now um let me see i'm going to highlight this um we're only going to be able to know when we actually run our query but this is the idea we just copy and paste that over here and now we have our graphql query done so what we can do now is we can come to our home.js and we can actually start implementing our apollo client code inside of our components so the first thing we want to import is we want to import the use lazy query hook from let me just say from graph from apollo client sorry at apollo client here and let me just check to see if this is actually a hook so use lazy query yeah we i wrote it right so we're actually going to import use lazyquery and what we are what we need to import as well is we actually need to import the query that we just created so i will just come over here and i'm going to say import from dot slash um let me go twice back graphql slash queries and inside of here i can just put get weather query and it already knows that we want to that we can import this because we are actually exporting this over here so what do we do now well we can come here to inside of our function and we can almost very similar to when you're kind of just creating a used state or when you're using different hooks that are built in into react we can just come inside of here and we can say const and we can put here first of all the name of a function and what do i mean by that is with the use lazy query hook we basically have to pass a function inside of here which is going to be the function which we call when we want to make the query it's a bit different from use the use query hook because we don't have this function because it just makes it automatically but we use lazy query we have to put here a function the name of a function that we want to use so in my case i'll just call this get weather something like this and then we have to put a comma over here and then pass curly braces so that we define two more things that we might want to get from our api call one of the variables that we can get is loading and the other one is error and this is common with apollo client basically while the the data is loading this is a boolean so we can just constantly check if the data is actually loading and if there's any errors it's going to be cached and it's going to be displayed in this variable right here called error so it's great because now we have a nice way of handling errors and also checking to see if our data is still loading right and then what we can do is we can just come over here and say that we want to make this equal to use lazy query and we can put here first of all the actual graphql queries so let's put getweatherquery and then you can just pass an object which the reason why we're passing this is because when we have a function which has parameters or arguments and we're using it like in graphql we have to actually pass the variables this way so we pass the object and then we say variables and then we say the name of the variable so name and then we pass over here the value for our variable for now just as an example let's test like hard coding vancouver over here just to check for the weather for vancouver and this should be fine now when do we want to actually make this api call is when we click on the button right so let's just come here to our button and say on click and just pass a function over here which basically just calls the get weather function and this is exactly how we use the use lazy query hook because now when we click on this button the function that we define inside of here will make the api call but how exactly do we see our data well for now let's just first of all write some error handling here by just saying if error then i want to return something saying like error found for now let's just do it like this just so we have an idea right and then if the data has been received we can just say if data and by the way we we also need to import data over here i just forgot it so we have to import data and data over here will be actually the variable that like gets the data right so when we make the api call and we receive the data back it's going to be represented by this variable right here so if data has been received then for now let's just console.log the data so let's actually check to see if this works and if it doesn't i'll just see what i did wrong but basically we'll just see what's happening so let's save this let's come to our react app and what's happening um error found expected the money sign found name so i'm gonna try to fix this and i'll come back in a second oh okay so in our query over here number four query we actually have to put a dollar sign over here because we're defining um name as the variable and it will make sense because then we define name to be exactly what we defined at the top here so this is just a small bug but we had to put the money sign on this one as well so let's come here to our code and let's refresh this now we can see our project is loading let's check our console log obviously we haven't consoled logged anything but let's search and when i click search it's searching and we receive back uh a console log and apparently it is actually working you can see that the country is canada the name is vancouver the weather is all of this weather that we can see right here so it means that it's working we just now have to implement some more stuff for example being able to make the query and pass the variables that we actually want to right so how exactly do we do that well we're going to come here to our visual studio code and we're going to create a state here at the top um i'm going to create it before the the call for the use lazy query hook so we're going to come over here and just say const and it's going to be a state so use state and for that we actually have to import the use state hook here at the top so use state and over here it's going to be a string and basically this is just going to be this state which is going to be representing the city that we're searching right city searched and set city searched um so what we can do is we can come here to our input and we can just pass an unchange event over here and inside of it it's going to grab an event and we can just say that when there is a change in our input we want to set cd searched equal to event. and now our state will change depending on what we write in our input it's it's that simple so what exactly does that mean well now what we can do is we can just come here to our variable in our use lazy query hook and we can just instead of passing vancouver we can just pass the cd searched state and if we save this we can come here to our our project let's refresh this let's look at our inspect and i'll just clear this so you guys can see it better and what we can do is we can search for another city i'll search for rome and when i click search it's gonna search for it and we get back the city and it correctly searched for rome apparently it searched for a city called called rome in us this wasn't the one i was searching for but basically you can see that um we got all the information back and it works for um every city los angeles let's see if this works i don't know if the api is great but when we search for it you can see that we receive the information for it and it works perfectly so it means our project is actually working but i'm gonna style this a bit just so you guys can make this like look better looks like make it look presentable so that we can actually display our data so to do that what i'm going to do is i'm actually going to um first of all create a div down here so a div and it's going to be called it's going to have a class name of weather and basically what we want to display here is we want to first of all display the name of the cd so we're gonna have here something like called city name and it's gonna display the actual name of the city that we we have received then it's gonna display some pieces of information that are important so let's take a look at what information we can get from this um so for example we can get let me see we can get the name of the city the country then for the weather we can get kind of a summary so we'll try to get the summary the description of the summary so something like clear sky as you can see right here then let's try to get the temperature so the actual temperature so this is information that we might want to have and finally let's just get like the the the wind right that's just something random but let's get the the degree and speed of the wind so let's try doing this let's come over here and let's write out all of the information that we want we want the what do we say we want the temperature we want the description so description and we want the wind so h1 wind so obviously it won't look perfect but we can see over here that this are the information that we want so let's actually work to make this make like make this data appear right well we can just come over here and since we're not using loading you can use loading if you want just for like some visual um response of whether the date is loading or not we're not actually going to be using this for now let's just delete this well we can come over here at the bottom and we can just ask okay first of all um if we only want to display this information if the data has been loaded so if we receive the data so let's just say if data then we want to load this basically like this so let's just put this inside of here and obviously it's going to give us some errors for now because we have to wrap this around with an empty tag so i'm just going to put this empty tag over here and when i save it you can see it looks great so basically what we're seeing here is we are not going to load the data the data like the city name temperature and description if we haven't received the data yet which makes total sense because we don't want to load stuff that we haven't actually received yet so let's try searching for vancouver and you can see that the data isn't displaying yet but when you click search it's going to search for the data and we receive the information here but this isn't the actual information that we want to receive what we want to receive is the actual city name the actual temperature and the actual description and the actual wind or our wind spin or whatever we're going to use right so let's start by city name how do we get the city name from this data well let's check in our response here in our console you can see that the data is displayed like this it's an object containing the property get city by name so we have to say data.getcd by name then inside of it there is the name of the cd so we can just for city name you can just say data.getcitybyname.name so let's try to do this data.getcd by dot name and let's see if it works um if i refresh my page you can see that it changes to vancouver because it correctly identifies what we're trying to reach right then we want to look for the temperature the temperature is a bit different because we not only have to go to the to the get city by name we also need to go to weather and then temperature and then we want to reach for the actual temperature over here so let's try doing that let's come over here and copy exactly what we did here and let's just paste it over here and instead of saying dot name let's say dot weather and then dot temperature and then dot actual and if we refresh our page you can see that it's going to display the actual temperature that is displayed that we got from the data now for the description it's very similar for as for temperature the only difference is we're not going to the temperature object we go to the summary and then the description so let's just come over here and i'll actually just say like description and i'll display the description right next to it and change this to summary and then to description like this let's let's see how it looks and it actually works right as you can see and finally we want the wind so wind is very similar again to to the description and the temperature as it is instead of weather but we only we only want to see this the wind speed that's the only thing that matters i think i don't know a lot about wind but let's just display the wind speed so let's come over here and say wind speed and let's just display data city by name dot wind dot speed and i'm also gonna say temperature over here temperature like this when we save this you'll see that um we received the information it's all perfectly displayed if we search for cities like las vegas and search for it you'll see that the data should appear for this city it works for every city in the world i think um but you can see that it's working obviously it doesn't look perfectly like it doesn't look perfect at all but i wanted to make this video because it is a great great introduction to how to actually implement graphql using react because a lot of people get confused especially because um normally you would write the graphql api in the backend and then also implement the api calls and the front end but believe me it's as hard to to work with graphql in the front end using react as it is to creating your graphql api in the backend i have videos on both which i'm linking in the description or in the in the cards here at the top but i i really think that it is a great introduction to distinguish how to work with them uh both in the front end and both in the backing so i really hope you guys enjoyed this video if you have any doubts leave a comment down below i answer every single comment um subscribe because i'm posting every single week three times a week and i would really appreciate it yeah i really hope you guys enjoyed it and i see you guys next time

Channel: PedroTech

Views: 10,509

Keywords: crud, css, javascript, learn reactjs, mysql, nodejs, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js crash course, react js, express js, pedrotech, traversy media, traversymedia, clever programmer, programming with mosh, tech with tim, freecodecamp, deved, graphql, apollo client, graphql tutorial, graphql react, apollo client react, apollo client 3, react graphql tutorial, react graphql project, react graphql apollo, web development, apollo graphql

Id: BABUMRn47iQ

Length: 29min 52sec (1792 seconds)

Published: Mon Jan 18 2021