tipe docs
Home
Blog
Signin

Data Modeling

Tipe gives developers full control over the shape of their data. Just like with database, you design schemas. Tipe uses those schemas for a few things:

  • Create an editor app for your team to create content based of your schemas
  • Serve as a template to ensure content thats being created actully uses your schema

Tipe schemas are powerful and capable of really advanced data models. We'll walk through how to create a schema for blog post website.

Getting started with a document

At the core of a Tipe schema are document types. Document types are used to documents. These documents are the content you will query for from our API and what your team will actually be creating on the content dashboard.

We can start by creating a document schema for a blog post.

const { createSchema } = require('@tipe/js')
module.exports = createSchema([
  {
    id: 'post',
    type: 'document',
    label: 'Post',
    fields: [
      {
        id: 'title',
        type: 'string',
        label: 'Title'
      },
      {
        id: 'slug',
        type: 'string',
        label: 'Slug'
      },
      {
        id: 'body',
        type: 'Markdown',
        label: 'Body'
      }
    ]
  }
])

Right now, we have a schema for a post document. The label is how Tipe will present instances of this document to your team on our content dashboard. We gave this schema some fields. A field has 3 required props:

  • id the actual json field from the API response.
  • type the data type of this field.
  • label the label for this field used in the editor. Does not effect the API.

Adding an image

Tipe has support for images with our CDN. We also created a custom field to upload and set images on your content. You just have to make a field that uses it. So, now we'll add a field that for an image to our post type

  // ... other fields
  {
    id: 'featuredImage',
    type: 'image', // built in custom type
    label: 'Featured Image'
  },

Using the custom built in type image, we created a new field featuredImage that will allow somone to select or uplaod an image.

Objects and Arrays

Tipe schemas support obects and arrays as well. Lets add a seo object field our post type.

const { createSchema } = require('@tipe/js')
module.exports = createSchema([
  /**
   * Object type
   * */
  {
    id: 'postSeo',
    type: 'object', // objects have object types
    label: 'Post SEO',
    fields: [
      {
        id: 'description',
        type: 'string',
        label: 'Description'
      },
      {
        id: 'facebookImage',
        type: 'image',
        label: 'Facebook Image'
      },
      {
        id: 'twitterImage',
        type: 'image',
        label: 'Twitter Image'
      }
    ]
  },
  {
    id: 'post',
    type: 'document',
    label: 'Post',
    fields: [
      {
        id: 'seo',
        type: 'postSeo', // use the id of another schema
        label: 'SEO'
      },
      {
        id: 'title',
        type: 'string',
        label: 'Title'
      },
      {
        id: 'slug',
        type: 'string',
        label: 'Slug'
      },
      {
        id: 'body',
        type: 'Markdown',
        label: 'Body'
      }
    ]
  }
])

Here we created a new schema for creating seo meta data. This field is an object types. You cannot make new instances of object types like you can document types. This makes object types abstract data modeling schemas to share pieces of you schema with other types.

Now, we'll add an array type for a list of tags for our post.

const { createSchema } = require('@tipe/js')
module.exports = createSchema([
  /**
   * Array type
   * */
  {
    id: 'postTags',
    type: 'array', // arrays have object types,
    contains: [ // array types don't have fields.
      {type: 'string', label: 'tag'} // will allow a user to insert a `tag` into this array.
    ]
  },
  
  {
    id: 'postSeo',
    type: 'object',
    label: 'Post SEO',
    fields: [
      {
        id: 'description',
        type: 'string',
        label: 'Description'
      },
      {
        id: 'facebookImage',
        type: 'image',
        label: 'Facebook Image'
      },
      {
        id: 'twitterImage',
        type: 'image',
        label: 'Twitter Image'
      }
    ]
  },
  {
    id: 'post',
    type: 'document',
    label: 'Post',
    fields: [
      {
        id: 'seo',
        type: 'postSeo',
        label: 'SEO'
      },
      {
        id: 'title',
        type: 'string',
        label: 'Title'
      },
      {
        id: 'slug',
        type: 'string',
        label: 'Slug'
      },
      {
        id: 'body',
        type: 'Markdown',
        label: 'Body'
      },
      {
        id: 'tags',
        type: 'postTags', // add the id of the array type
        label: 'Tags'
      }
    ]
  }
])

You can add array types as fields of object types or inside other arrays. Same goes for object types. An object type can refer to itself and you can cretae a recursive object schema and the Tipe editor will handle it gracefully.

Our schema is looking really nice now, good work!. Lets add the finishig touches on it.

Prepare for previews

To ensure your team can preview thier draft documents on the site you're making, you have to set a previewPath for document types. Lets set one for our post type.

{
  // post type
  previewPath: '/blog/{fields.slug}'
}

The previewPath above should match to your path to the page you have setup in your app that will render a blog post. Tipe will interpolate the previewPath with the document a user is trying to preview. So you can access the document object using the {} in your previewPath string. We're using {fields.slug} which will the whatever the slug value is of the draft document that a user is trying to preview.

Schema Reference
Everything about schemas