React Skeleton Screen Tutorial #2 - Fetching Data

Key Takeaways

all right again so now we have the basic structure of our application sorted what i'd like to do now is try to fetch some data so that while that's loading that data we can ultimately show those skeleton screens now that data is going to come from jason placeholder which is a fake online rest api for testing and prototyping so it gives us access to a load of different endpoints that we can use to get some dummy data so i'll leave this link down below so you can check it out for yourself it's got loads of different endpoints that we can use which are listed down here we're going to use a couple of different resources posts for the articles on the left over here and then users or rather just get a single user with a single id for the user details on the right so first of all let's address the user details the profile bit so i'm in the user component and what i need to do is create a bit of state to store whatever data that we get back from that end point so to do this i'll be using the use state hook so const and we'll call this bit of state profile and we need a function to update that profile which is set profile and then i'm going to set that equal to use states and that should be auto imported at the top and we're going to start that off to be null so initially when the page first loads that bit of state is going to be null we don't have any user data yet but then later on once this has been rendered this component to the dom we need to go out and fetch the data now to do that we'll be using the use effect hook and the use effect hook runs automatically after the component has been rendered so that's the time we want to go out and grab the data so use effect press enter should auto import it and then inside here we want to fire a function which will run after the component has been rendered and then inside here i'm going to create a set timeout and the reason i'm using a set timeout is so i can delay the fetching of data so that we can see the skeletons on here for longer because if i didn't do this then the actual request would be really quick to get this data and we're going to only see those skeletons for a second and in order to preview those for longer so we can see that effect i'm going to create a delay of about five seconds now you wouldn't do this in your normal application to be absolutely no need to do that it's not something that a user wants to see all the time these skeleton screens it's just a necessity so do not delay your asynchronous requests normally this is just so we can see the skeleton screens while we're developing them so anyway this is going to be an asynchronous function that fires after that delay so let's create that function first of all and then after that we want to set a delay of 5000 milliseconds which is five seconds now the reason i've marked this as async is because we're using the await keyword inside here again i've got a whole series on async javascript on this channel if you want to learn more about async and weight so we're going to say const result is equal to a weight and then we're going to use the fetch api to grab some data and i'm just going to paste in a url and end point into here which is forward slash users forward slash one where one is the id so that's gonna grab us something from this end point right here a user with the id of one okay so that's the first step then when we get the result we want to turn it into a javascript object so to do that we can create a new constant called data which is what we'll work with and set that equal to a weight response or result.json so we're taking this result right here and using the json method on it to pass it into a javascript object so we can work with it and then all we need to do is update the profile right here so that it matches this data so to do that we use this function set profile set profile and passing the data and now once this is all done after the initial five seconds and after any additional time it takes to grab this resource we're going to update the profile so that it matches whatever result we get back okay so now we could potentially show this profile in the component so that's what i'm going to do now we need to do a check first of all to make sure we have the profile so let me do curly braces and then say profile and then double ampersand and then some kind of template so the way this works is if this is true on the left side of the double ampersand then we're going to output this template right here if this is not true then it doesn't even reach this side and it will never output this template okay so only when we have a result back and we've updated the profile will this be output to the screen otherwise this is null to begin with and it won't output it so what do we want to output once we have that profile information well first of all a div so let me say div with a class name and that class name is going to be equal to profile and inside that div i want to then create an h3 first of all and inside the h3 i'm going to output the profile.username so that is a property we get back from the data when we grab a user from jsonplaceholder and by the way i've just realized all of this stuff right here needs to go inside this div so let's place it right here okay okay so we've now output the username below the username i want to also output the user email so let's do that inside a paragraph tag and again we'll say profile and then this time dot email and then below that i'm going to output the profile website so let's do that in an anchor tag a href and set that equal to the profile dot website so again these are all properties on this thing right here that we get back and then inside the anchor tag will output the profile website as well profile dots website like so okay so again we're only going to output all of this once we have a profile back so let me save this now and preview i'm going to refresh over here we'll just have to wait a few seconds five seconds then however long it takes to get that data and then it shows right here now in all of that time ultimately while it's loading we're gonna show a skeleton screen but for now so we know that something's loading let's just output some text saying loading or something like that so the way we do that is very similar to this we're going to do curly braces and then this time exclamation mark profile double ampersand and then some kind of template now this means that only output what's on the right when we don't have a profile and that is going to be true when it's null before we have any data back so this is only going to show when this doesn't show and vice versa right so whenever it's loading we're going to show some kind of template on the right now i could place this inside parentheses again and go down to the next line but because we're only going to output one piece of text i can just do it in a div tag directly here and just say loading dot dot close off that div like so okay so if we save it you can see loading and then when we have that data after the delay it should output the user details awesome okay then so next up i want to do the same thing for the articles so let's head to the articles components and again i want to create a bit of state to begin with so const we'll call this articles and set articles set that equal to use state and press enter so it auto imports and to begin with that is going to be null as well now oops make sure that's not in capitals so no okay so now we want to do something very similar to this thing over here use effect set timeout and grab the data so i'm just going to copy all of that because i can't be bothered typing it out all again and i'm going to paste it in this time we want to change the end point to instead of forward slash users to forward slash posts and we don't want to get one post we want a load of posts so we don't pass in an id to be one or something else this grabs us a whole host of different posts and then we want to cycle through those when we have them and output them in the template before we do that we just need to update this right here so instead of set profile it should be set articles like so okay so if we remember over here inside user we did something like this to output loading if there's no profile yet we're going to do something very similar for the articles so let me do that at the bottom down here paste it in this time we need to check for articles so if there's no articles to begin with then we show loading right now when we do have the articles we want to cycle through them and output them but first of all we want to make sure we do have them so articles then double ampersand and then we want to say articles dot map so this is how we cycle through something some kind of an array in react and we output a bit of template for each item in the array so each item is going to be referred to as a single article you can call this variable what you want but we pass it into the callback function inside the map method and for each article we're going to return a bit of template so first of all i'm going to do a div with a class name equal to article so it's a single article we also need a key prop because when we cycle through data react needs a key a unique key for each template that we output for each item and that key is going to be the article dot id because on each article or each post that we get back from this endpoint it has an id property and i can show you that if we go to forward slash posts this is what we're grabbing we're using this thing right here this id okay all right so now inside that div let me just close this off first of all inside the div we want to output a couple of things from the article we want to output the title and the body so let's do an h3 first of all and that is going to be for the title so article dot title and then below that we want a p tag for the body so article dot body alright so i think that's pretty self-explanatory if this articles we're cycling through them using map and for each article we're returning a bit of templates where we're outputting that article information and also providing a key which is the article id all right so now while everything is loading it should show this text but then once we have the data it should show all of the articles so let me save this and come over here and it says use effect is not defined that's because we've not imported it up here use effect save that and come back over here now we can see loading over here as well when we get the articles after five or six seconds they're all listed right here awesome so now we have that data fetching in place in the next video i want to start to create our skeleton components so that ultimately instead of showing these loading text things right here we show those different skeleton templates instead