Fetching/Loading data from an API in Sveltekit

all right guys in the previous video we created this button um and in this one we are going to create these cards but the data for these cards will not uh be coming from a static thing we're gonna use a Json placeholder for this so we can use um posts for this uh I am inclined towards using photos now photos is uh is huge but I think uh we can we can still use it because it has a title and also an URL which is uh more than enough I think because uh here in in here we can have a title and maybe uh there's no description of that maybe we can have that as a title uh we can provide a custom title and instead of this green squares here we can actually show an actual image from some random image right so let's let's see how to do that now um so this API we can easily fetch it on client side in in here but there are better ways of doing it but I will still use the method of getting it right inside and see why it is not the best way now in order to get it we will have a function of some kind so I'll start get we'll call this posts or something and um so we will make this uh asynchronous we are going to use a weight here so const response equals a weight pitch and this photos now this is going to be huge uh but I don't think that's gonna be a problem so let's let it be huge so const data equals wait response Okay so and console.log data so maybe we want to return data as well okay so this is a weight so what I'll do is I'll invoke it here get pause and see if we get it I mean it could be a promise at this moment but it's it's fine now let's go to our page here or we are getting it all the 5000 of those uh okay refresh ah okay yeah maybe it's it's huge for us it's okay uh what I will do is uh const filter data equals data dot uh slice Maybe zero comma three is that how we do it I don't know so I'll just uh I may have to console log that okay yeah we got just three so this is enough for now um okay get post is working but uh it's better to do uh on mode use and on mode function sometimes you know it may not it may return the promise so if you want to be sure you get data so we use an asynchronous thing here and then Advanced or let course and let it be an empty array now inside we do let's sorry posts equals get posts maybe a weight now that should give us posts so if I console it console log posts yeah it is giving this um okay let me go here I will do each Loop and show them right so each uh post now I'm using posts and all this now if I don't want to use all that so there is something called await in sweld which can be used so we can invoke the function here itself get posts now while it is loading we can show a message like loading or once it is done we can do something like then and what do you want to initialize this as data and then you can uh when and end this await now here we'll have access to data Sorry by root Json not stringify data so I should have those three posts here itself so if you look at this so I'm having those three posts here I can remove this once a lot now I see this uh title and URL and familiar that so maybe that is enough for me data as title and URL so it was an array right so why am I erasing it right now creating it like object each so here I don't want data Dot I just want URL type now it should yeah awesome okay now this uh Dev can be grid maybe so I'll style the grid doctorate we call Great template column if you're not sure you know you can use something like bootstrap or Tailwind or something that will do repeat three times one production it's gonna do it I think here and have another div here great uh but it should be outside did it happen the single grade grip template columns it says something okay this playground that was silly so display grid is important there yeah so we have it so before that we might want to enclose this in uh container okay now it looks quite okay and okay see at this point so it's it's getting bigger and bigger and it's making this file complicated so it's it's a good way uh maybe a good practice to move this into a different component altogether but before that I'll show you a few ways of getting this uh data so I'm gonna have p I'm gonna have a lead so we are going to get the title as well um on image might need some you know width here should be 100 so let's say and I think it's gonna expand that so it will do object fit color objects position Center now after this we'll also have a gap here of two okay now to this grid maybe we want some kind of padding padding VM zero so top and bottom will have two Em Up back okay so this looks quite okay we might wanted a different I mean a bigger height maybe so 250 uh not quite right it should be 300 at least yeah 300 seems fine and title and then there is button so I'll get to that but before that so since we already fetched it I'll show you this way of fetching it so let's pause equals this and then using in stuff in this case we can completely avoid using uh force and await which is not a bad thing you know you can still use it so here you can use posts okay did something go wrong this thing was left open is that so yeah Okay so okay pause uh implicitly I mean it will get that data So eventually it's if I refresh um yeah it will get the data eventually now but if I look at the source uh we will not have that initially because if you look at this the container for uh it's empty right initially it won't be there even in uh you know the weight block that we used even there it will not be like you know server rendered there's only loading because at that point loading is only there now what we usually want uh is maybe uh not this we want it to be in the source code when we view the source in such cases you will have to move this to a page.js now it is just maybe you can call this a loader so let's let's add that for this route so we can have something like plus page dot Js right so we can have a load function here export on this load it used to be in the same file before same file as a swelled file it has changed now it has its own different file and it's actually good and the return has been improved a lot now I'll get this uh entire thing this is no longer period so here and then I'll return uh posts get posts I'll invoke now what happens uh this will be suicide rendered so but you have to get it right so uh you should make data accessible from this component so that way data will be updated now if I do console.log editor so instead I'll just uh remove this for now comment this out because post is not defined now let me look at what we get post is you know these three right so how we can get that it's const posts go Stella so it's restructuring you can also do data.posts that is also fine you can do this if you want to do this in a reactive way you can use this method you will have to cover the entire thing in brackets like this this is also possible which is not required at this moment I mean it will it will not be empty or it will not be undefined at this moment so it's fine I'm gonna uncomment this and it should it should get us this now if I go to view source and refresh I have the you know have this uh filled up and all this data is already there so this is useful in case of SEO so you want something to be read by the Bots uh or SEO friendliness that will happen so yeah okay so this is this is one way of doing it uh now let me go to network network tab let me load this again okay okay now you see this here um so this request it's a fetch request photos and we see that you know where it is going right which API it is making the request from now in some cases you might not want uh the user to see it in such cases you can just run this in server by renaming this to server.js page Dot server.js all right uh this isn't Gonna Change much in our uh you know how the page looks but it's just that even if you look at all these things how it is loaded uh you will not be able to uh you know find out where this data is being loaded so that a particular fetch function will not be available here so it happens in the server and our server set rendering or SSR we call it still going to be there okay so that's that's one way I mean if you want to hide certain things from people that you're you know API if if you don't want anyone to use it or abuse it you can you can use it in server and it should be safe but it's it's better to use environment variables and have your token and everything saved there all right so that's uh that's a few ways to fetch data from an API okay so there will be more of those uh in the next one probably we will uh use this you know create or build this contact form and in while building contact form we'll try to explore swelled actions all right thanks guys I'll see you in the next one bye

Channel: WebJeda

Views: 9,366

Keywords: sveltekit, sveltekit tutorial, api, fetch

Id: xJ0MSOWTnz4

Length: 15min 34sec (934 seconds)

Published: Sun Jan 01 2023