Documents

There are two types of schemas we can define. The first is Document. When working with Sanity, everything starts with the document. It's the main type of schema, and all other types are defined with a document.

They're unique, contain metadata on creation and manipulation, and form the basis of how we're going to make our schemas in the Studio we already set up.

Making our first document schema

First, open up the /schemas folder and create a new file named dog.js.

Now, let's begin our file by defining the name, title, and type of our schema:

export default {  name: "dog",  type: "document",  title: "Dog"}

Let's break this down:

• name: This is the name of the document. When we refer to it in our future GROQ queries and in JSON. This is the pure name of the schema we've made, akin to the name of a data type. Make sure you keep it unique and easy to remember for this schema. In this case, we just chose "dog". (Keep in mind that changing the name field after having data will cause the removal of all data that contains the type.)
• type: This defines the type of our schema. We chose "document", since that's the schema type we want our dog to be.
• title: This is mainly for our interface, as it's purely visual. Compared to the name field, we can name this anything from "Best Friends" to "Doggo Pals" with no changes to anything besides the visual title. For now, we just chose "Dog", but feel free to choose anything!

Adding fields to our schema

Remember the how we set up our Dog schema on the previous page? Here's a refresher:

Let's add these fields to our Dog schema. Don't worry if you don't totally understand the fields we're using, we will go into them in more detail in a bit.

  ...,  title: 'Dog',  fields: [    {      name: 'name',      type: 'string',      title: 'Name',    },    {      name: 'breed',      type: 'string',      title: 'Breed',    },    {      name: 'age',      type: 'number',      title: 'Age',    },  ],}

The name, type, and title fields for each of our schema fields work the same way as they did when we were making this document. We use the string type for one-line text, and the number type for any number.

Now, let's check out our Studio at http://localhost:3333 and see if anything looks different.

If it's not working, make sure that you ran npm run dev in the terminal panel.

Well, that's weird. I thought we made a schema, shouldn't it appear here?

Do you remember /schema/index.js? We need to import all of our schemas there for the Studio to recognize them.

Adding schemas to the Studio

Let's import dog.js in /schema/index.js.

import dog from './dog'
export const schemaTypes = [dog]

Now, let's go back to http://localhost:3333. You should see a Dog item under the Content column on the left. Click on the Dog Item, and you should see something like this:

See that writing icon at the top right of the Dog column? Click on it, and it will open this on the right:

This is what we made! It has the Name, Breed, and Age input fields. Let's fill it out. I made one for my Shih Tzu Astro, who is 5 years old. When you're done filling it out, hit the Publish button (which should've turned green) in the bottom right.

Hit the writing icon, and add another Dog! I'm going to add my younger Shih Tzu Bean, who is 3 years old. (Feel free to do whatever dog name, age, or breed you'd like!)

Your Studio should look similar to this:

You can add more Dog documents, edit them, and delete them.

You can delete, duplicate, and unpublish (to keep as a draft) documents by clicking the down arrow next to the Publish button.

Seeing our data in action

Before we move on, let's see how our data looks. We'll be using the following GROQ query in the Vision panel to see this data as JSON (Javascript Object Notation.) We will talk more in detail about all of this, but for now it's helpful to see how far we've come.

Go to the Vision panel at the top of the page, and paste this query into the left column labeled Query.

*[_type == "dog"]

The *[] queries all of our documents, and using _type == "dog" specifies that we only want our dog document types. You should see something like this pop up on the right:

[…] 2 items  0:{…} 8 properties    _createdAt:2023-02-08T06:39:51Z    _id:38e6fdd7-c83d-4a62-b406-0f0749d28b7e    _rev:NIo0EorZ2fqE7CVJsrNLW4    _type:dog    _updatedAt:2023-02-08T06:39:51Z    age:5    breed:Shih Tzu    name:Astro  1:{…} 8 properties    _createdAt:2023-02-08T06:40:43Z    _id:fb2ce304-bebf-4ff8-a315-60b7ed78a421    _rev:NIo0EorZ2fqE7CVJsrNQKK    _type:dog    _updatedAt:2023-02-08T06:40:43Z    age:3    breed:Shih Tzu    name:Bean

You can see that there are timestamps for the creation and the update (which happen to be the same since I didn't update these documents), along with their age, breed, and name.

We can filter out all the unnecessary information with this query:

*[_type == "dog"] {  age,  breed,  name,}

Which gives us this result:

[…] 2 items  0:{…} 3 properties    age:5    breed:Shih Tzu    name:Astro  1:{…} 3 properties    age:3    breed:Shih Tzu    name:Bean

Now you know all about document schema types! Try making a few of your own, maybe! On the next page, we'll go over the other schema type.