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 typelabel: '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 typeslabel: '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 schemalabel: '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 typelabel: '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 typepreviewPath: '/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.