Jamstack Explorers

Angular Dynamic Data with Sanity.io with Tara Z. Manicsic

Netlify Function for Angular & Sanity.io

We want to grab data from Sanity.io without the rigmarole of setting up complicated server calls or serverless functions. Instead, we'll take advantage of Netlify Functions which are a wrapper for Lambda Functions with all the power but barely any setup.

📓 Resources 📓


Speaker: [00:00:00] It's time to populate our page with the information we have in Sanity IO by creating a Netlify function, a serverless function that hits up that data source and populates our page.

Based of our project directory, we'll make a directory called functions for Netlify functions to find, and change into there and create a file named getProducts.js. Netlify will automatically find this file but we also have it set in the Netlify.toml already. First we exports.handler [00:00:30] and go ahead and that will equal an asynchronous function.

First, we're going to make a function that just sends an okay to keep it nice and simple, so we'll just return. In here, we're going to open up an object and inside of that object we'll send statusCode 200 saying everything's a okay and a body that will just send back okay. We always recommend setting status.

Technically, we have a serverless function. We can go ahead and [00:01:00] try that out. I just want to show you here in Netlify.toml, we have the function set and we're also going to make a dev environment so we can use Netlify dev.

Here we're still going to put a command but we're going to set it to "npm run start" and we're going to say this is where functions live. Again Netlify automatically finds that now. Then also we're going to be publishing everything from the source directory. This is a way for us to do local development but still have the capabilities [00:01:30] to check those serverless functions. We just have to run Netlify dev but I'm in functions right now. I need to go back to the main directory and run Netlify or NTL dev there.

This will start up a local server. See, we still get our environment variables tokens passed. It gives us a really handy way to check a lot of these things out. Now if I go to a localhost:8888, this is where the local development Netlify dev project is running. [00:02:00] Then I'll do /.Netlify/functions/getproduct, the name of the function, and look, it's okay. Yay.

Now that we know that it's okay actually working, we can actually pull some stuff in that we'll need from sanity. Image-url, client, and block-content-to-html. This is what's going to help us render those sanity schemas and the information and the data that we have when [00:02:30] we grab that stuff with this function. Everything that we installed we're just going to require it here.

The sanity client which we obviously need to talk to sanity and then the image URL builder and blocks to HTML. Again, that block content was the free form writing that we're now going to put to HTML. With this, this is where we set our process or our environment variables that we saved so that we can talk to sanity. [00:03:00] We pass those to the sanity client and we want to use the CDN to make sure that we have the data coming through the CDN.

Now here is where we set the query where we're going to get type=product. All of their products and we're going to set the order to title ascending and then products will equal an await function to sanity.fetch passing in that query. Then we take the results and set all products to a [00:03:30] map mapping over each of the products to give us the product which will set to an output where we'll get the ID, we'll get the name, we'll get the URL.

You can add all of the things that you know that comes through here for what you're grabbing from sanity. The URL we're setting to where we found that function that .Netlify functions get-products and the price is pretty straightforward. It's the product default [00:04:00] variant price. We're digging into that product and the variant, the description will come through as the blurb and the body is where we use the blocks to HTML.

We're setting that product body that comes through as a block sending it to HTML so we can render it on the page. Then we set this const image but we want to make sure that an image exists because if we didn't make it so that the user has to put it. [00:04:30] If there's images and the length is greater than zero, we'll go ahead and set it to that first image, otherwise, set it to no. If there's an image, we're going to say output.image equals that image URL builder for that sanity image so that we have a real true URL for the image. We'll return output and then we'll also return-- I'm going to cancel that allProducts [00:05:00] so we can see what that looks like, and then we'll return allProducts.

Now, we still have that return from the original function where we'll send content type as application JSON, and the body will be the stringified version of the products coming through. What does that look like? Let's find out. We can do this locally, thankfully, with netlify Dev, and we're in the base directory, so it works this time. [00:05:30] We just have to run that up, and it will set those environment variables, thankfully, and we can go to localhost 8888, but then we're just going to hit that function up again so that we can see the logs that we put in, so /.netlify/functions/the product names. Project is not defined, so I see here that I actually have a [00:06:00] typo, shocker, not my strong suit.

We have project ID there, but we're saying project instead of product here when we're grabbing information from that map overall products. We need to not have project there because that doesn't make any sense. Now you see all the highlights will let us know that we have the right variable there, product, not project, but that's what the [00:06:30] errors look like, so I wanted to share that with you.

Now if we go back, you see it already uploaded that new version, and we can just refresh, and there is that beautiful amount of JSON string of data which you also see in your logs. This is what you're going to see in your terminal where you ran Netlify dev all locally, which is really nice. Again, what you saw in the browsers if you hit that raw function, so we have it technically running locally, yay.

[00:07:00][END OF AUDIO]


your progress