Solid JS Tutorial #9 - Fetching Data

Key Takeaways

all right then gang so in this lesson what I'd like to do is show you how we can fetch data from somewhere and then inject that data into our component templates so what I want to do is fetch a list of products and then cycle through those products and output a card for each product where inside the card we can dynamically output a title maybe a description could be a price and a button to view more about that product so you could get this data from any kind of third-part API or your own API entirely up to you what we're going to do is get it from a local Json file now I've already created that I've created a data folder over here and inside that a db.json file inside that Json file we have a product property and the value of that is an array and inside the array I've got loads of different product objects so each product object has an ID property which is unique a title a description price and an image source now the image source is just basically a link to the images from my real merch store now if you want to grab all of this Json you can do it's on the GitHub repo over here who so you can just go to lesson nine then go into Data then db.json and just copy it all from here and paste it into this local file so the way we're going to use this is by using a package called Json server and what Json server does is it allows us to watch a Json file locally and wrap that with API endpoints so we can treat it a bit like an API and fetch that then from our components so you need Json server installed on your computer to do this so open up a terminal and you want to say npm install hyphen G for globally and then Json hyphen server and press enter once that's installed we can run it by saying Json server and then hyphen W to watch a file and then hyphen P to specify the port number it needs to be four thousand now the reason I'm doing this is because the default port number is 3000 and when we run npm run Dev inside the solid project that actually uses Port 3000 so I'm specifying 4000 right here then we need a path to the file we want to watch so that's dot forward slash into the data folder thendb.json when we do that it's going to give us an end point for the different resources that we have and the resources by the way adjust the property names so products in this case so we could click on this and that's now going to show us all of the products in the browser so this is all the Json data cool so we know that's working and now we can use this endpoint inside our home component and fetch that data so to fetch data inside a solid component solid actually gives us a function called create resource so the way this works is as follows we say const and then in square brackets some kind of value you can call this data if you want I'm going to call it products but ultimately this will be the data we get back when we make the Fetch and we set it equal to create resource like so now we need to import that as well at the top so let's do that so I will say import create resource and that comes from solid.js like so okay so we have this and what we need to do is pass a function into this function right here and it will use that function then to go out and fetch the data so we could do that inline but we could also create the function up here as well which I'm going to do so const and then I'm going to call it fetch product but again call it whatever you want it's going to be an asynchronous function and then inside this function we're going to use basically the fetch API to fetch the data so we'll say const response is equal to a weight and then Fetch and then it's going to be that end point that we had down here so I'm going to control C that and then paste it in right here so now we're going to fetch the data from right here we want to then return something we're going to return response dot Json like so so it's going to resolve this for us we need to pass the function in here fetch products so when it sees this function it's going to run this for us automatically it's going to fetch the data we're returning the Json right here it's going to resolve that and then we're going to get the product data or the products data right here now what I'd like to do is show you that this has worked now I cannot console.log products like this because remember functions only run once in solid.js and if we do this because this takes some time the function has already run we're not going to have any products by the time this console log runs and I can show you that if I save it and come over here we're going to open up the console I'm going to go to the home page and we can see products is undefined at the minute so what I'm going to do instead because we've not looked at client effects yet is I'm going to come down to the bottom of the template outside of this card and I'm just going to create another paragraph tag and I'm going to Output some Dynamic content here and all I'm going to do is run some JavaScript so console.log right here products like so and then also on this right here we get a loading property and that will either be true or false so I'm going to log that as well so we'll say after products products dot loading as well so that's going to be true to begin with then false once we actually have the products now this is going to be undefined to begin with but once it changes it's going to update because it's in the template right here we're going to see the update in the console and we should see a list of products so let me save that now and you can see to begin with we get undefined and true because it's loading then we get the data which is a list of product objects awesome and false because it's no longer loading because we have those products now so now what I'd like to do is instead of outputting all of this stuff right here I'd like to cycle through the products and output a better template for each product but I'm going to show you how we do that in the next lesson