Jamstack Explorers

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

Sanity.io Schemas

It's time to create our custom schemas in the Sanity schemas/ folder. We'll be making four new schemas (blockContent, category, product, & productVariant) then updating the main schemas.js file.

📓 Resources 📓


Speaker 1: [00:00:00] Now it's time to add the Sanity schemas. I just want to point out that I may speed up some of the coding actual writing of it in the video because it's quite repetitive but you can always pause the video. I will also put a link to the repo and the specific files that we make right now. You can always refer to those to type everything out. Without further ado, let's jump into the code. We're going to first go into the backend back into the backend, and [00:00:30] change into the schemas directory and then make the files that we need. The first one that we're going to work on is the block content. This is basically where people will be writing, like a text editor. We always need a title, a name, and a type. The title is what's going to show up on the page, the name is how we reference it. Then the type is basically the type of the thing that we're making.

The block type will need a type [00:01:00] of array. Then we set that with all the different parts that go into the text editor. It'll be array of, and then an array of objects. First, the block, which is everything that will go in here, like headers and quotes that we will format. Then we'll make lists, bullets, marks for decorators of strong and emphasis or italics. Then we'll also have annotations for URLs that are a link, an object, [00:01:30] and the fields will be URL, the [unintelligible 00:01:32], and the type of URL.

The last thing that we need on here is to add another object of type image where we can add an image, the hotspot is basically where it will zoom into if it's cropped, so we set that to true. Next, we have category and this is setting the category for each product. Again, all of these are going to be export default, and then an object. This one is going to be category, hence the file name. [00:02:00] It's a document type. Then they're going to be fields for the category. It's an array of objects again, the first one is going to be title. The name, again, will be title, the title will be title, and it's going to be type string. You'll see this redundancy of everything needing a name, a title, and a type. There are some types like we saw with array that will need more information like we have here with fields, it needs more information, like an array [00:02:30] of objects.

In the resources, I'll put reference to the documentation from sanity.io that lets you know the actual syntax and format of these. Again, these are fields that we're adding for when you choose categories. We have the title, we have the slug, we have the description. We're also going to have the ability to add parent categories. For instance, when we have, we'll have the category of chair and then the parent [00:03:00] category of furniture. You see here again, with the array type, we need an array of what and its of type reference, and we pass that through.

The next file that we've created is for the product. This is quite a big one. It's basically describing everything that we need for the product, which in this case for the demo is a bunch of chairs. This is going to be the main part of the form. We have a product and it's a document [00:03:30] and document needs fields. This is basically, you have a document, and these are all the fields that we're going to need to fill out to give attributes to each of the products. In the UI, you'll see you can add a new product, it's a document, so you'll see there'll be a tab for product and a tab for category.

When you hit those tabs, you're going to have all these fields that we're going to place in here now. We're going to have title, we're going to have slug. [00:04:00] As we go through, you'll see this is why it's so easy to customize sanity.io because we're looking at it in this schema sense where we can add these different things like the title, or the slug, you can use the source of the title and max length is 96. All of these things can basically have, you can add more different types than it will give you more areas in the UI to fill out in the form.

What we're making here, that [00:04:30] product variant is actually the next file, the next schema that we'll make. It's schemas and schemas and schemas, a schema inception. Again, that gives you this really great ability to customize a lot of these things. Basically, what we go through here is more of adding these different fields. I'm going to speed that up just a little bit. I wish I could type this fast. It would be a little dizzying though.

[00:05:00] The last thing I want to show you that we add at the bottom here outside of those different sections, is a preview. This is what's going to show up in the UI for each item and we're just going to put the title. Next, we have that product variant that I talked about. This is giving us more information about the product. This is something that we're adding to the UI so that the user is able to one, add more information about the product, and then we can also source this for different [00:05:30] parts of our layout to give information about the product.

Again, we have the different fields because this is type object. We can set up fields, which is an array of objects and in here we'll have the title, which is titled title string, the price. We'll also set it to a number and the SKU and also an image. When we add the image here where name and title will be the same, [00:06:00] but then it will be a type of array and of image. The images will be an array of type image.

Now, this is the main schema file for Sanity where we just add all of those schemas that we just wrote. We're importing it into the main schema file. We had block content and then we just relative path to that file that we just made. We made block content, we made category, we made product, and then we [00:06:30] also made product variant which is referenced in product but they just need to know what schemas did you make and where do they live so we can find them and make the UI with them. Then, we also need to pass them to types so that it will concatenate them with the existing sanity.io types. That's all we need for that schema file. This is actually what makes up our dashboard. You can import data from a dataset. This is [00:07:00] optional because the images are a little funny when you try to import and export data, but this is how you would import a dataset. You go Sanity, dataset import, and then you can give a URL to the dataset that you have.

This is actually from my base project. Everything that we added here, it's the exact same dataset. I exported it from Sanity, and now you can import it [00:07:30] using the URL and then sending it to the dataset you want to send it to, which is production. It's going from that export of production, which is that dataset to your dataset of production, and then there's this tricky flag, which is allow assets in different dataset. This is because images are tied to datasets so they're not very easy to import and export. To do it this way, it won't say, [00:08:00] "Hey, this exists, this doesn't exist in the dataset." Little tricky. You can also just add all your information. If you go to Sanity, start like we're doing now. Again, this is the way to locally see your Sanity UI. This is what we have here. Those category and product have chair and furniture as categories. I just reloaded it.

There's the category and it has chair and it has [00:08:30] furniture. These are two of the schemas we made. We see them on that left-hand side and then product. Now, this is the information that I brought in, but here is the UI that we just made by putting all of those names and types and titles in there. We see them now showing up. I recommend going in there and changing some things around that we made so you can see how this form will change and then go ahead and try adding some new items with that pencil and notepad icon next to product. [00:09:00] All right, we did it so far. Let's keep going.

[00:09:05][END OF AUDIO]


your progress