Visualising

complex content models

contentful-graph

About me

Hi, my name is Yaraslau Kurmyza (or simply Yarik)

Now: Head of Web @ croove (https://letscroove.com/)

Before: Lead developer @ crosslend (https://uk.crosslend.com/)

From time to time: Loliful App, Mutiful (Android), Uelco

​

Twitter: lotask | Github: lotas | Linkedin: yaraslaukurmyza

Contentful

• DX: Complexity shifting

Contentful

• DX: Complexity shifting�
• Application architecture
• Pages
• Containers
• Components / Blocks
• Blog / Articles..

Component 1:1 matching

Author

Category

Image

Photo Gallery

Component 1:1 matching

Author

Category

Image

Photo Gallery

Component 1:1 matching

Author

Category

Image

Photo Gallery

​

const PhotoGallery = ({ children }) => <div>{children}</div>

​

const Image = ({ src, author, category }) => <div>

<img src={src} />

<Category name={category} />

<Author name={author} />

</div>

​

const Category = ({ name }) => <h3>{name}</h3>

const Author = ({ name }) => <a href={`/users/${name}`}>{name}</a>

​

Component 1:1 matching - more components

Author

Parnter

Car

BlogAuthor

JobPosition

FAQAnswer

BlogPostList

PressCarousel

PressContaine

BlogPostList

Insurance

PressArticle

Feature

TwoColumnList

Feedback

CalculateEarnings

CarCarousel

FAQContainer

BrandedHero

FeaturesList

UserJourney

What to do?

• Try to understand the model
• Click around files in project
• Open all model definitions in contentful
• Do some hand-drawings on the nearby walls�
• Make it easy to understand
• Visualise
• Automate

Use Contentful API

API:

• Content Delivery (CDA) (read content, media, type definitions)
• Content Management (CMA) (manage content, content types)

Content type definitions:

• Fetch all
• Build dependency graph
• Visualise it

Understanding model relations

Mode field definitions:

• linkType: ‘Asset’
• type: ‘Link’
• linkContentType[]: ‘linkedModel’

​

​

"PressCarousel": {

"fields": [{

"id": "children",

"name": "Children",

"type": "Array",

"validations": [],

"items": {

"type": "Link",

"validations": [{

"linkContentType": [

"press"

]

}

],

"linkType": "Entry|Asset"

}

Understanding model relations

Mode field definitions:

• linkType: ‘Asset’
• type: ‘Link’
• linkContentType[]: ‘linkedModel’

Type of relationship:

• 1:1 field.validations[] (CMA)
• 1:many field.items[]

​

"PressCarousel": {

"fields": [{

"id": "children",

"name": "Children",

"type": "Array",

"validations": [{

"linkMimetypeGroup": [

"image"

]

}

],

"items": {

"type": "Link",

"validations": [{

"linkContentType": [

"press"

]

Understanding model relations

Mode field definitions:

• linkType: ‘Asset’
• type: ‘Link’
• linkContentType[]: ‘linkedModel’

Type of relationship:

• 1:1 field.validations[]
• 1:many field.items[]

​

"PressCarousel": {

"fields": [{

"id": "children",

"name": "Children",

"type": "Array",

"validations": [],

"items": {

"type": "Link",

"validations": [{

"linkContentType": [

"press"

]

}

],

"linkType": "Entry|Asset"

}

Visualising connections

$ npx contentful-graph

digraph obj {� node[shape=record];�� Category ;� Author ;� Post ;

Author -> Post;� Post -> Author;� Post -> Category;�}

models.dot

Visualising connections

digraph obj {� node[shape=record];�� Category ;� Author ;� Post ;

Author -> Post;� Post -> Author;� Post -> Category;�}

models.dot

Graphviz

​

dot -Tpng > model.png

Visualising connections

digraph obj {� node[shape=record];�� Category ;� Author ;� Post ;

Author -> Post;� Post -> Author;� Post -> Category;�}

models.dot

Visualising connections - real world models

Visualising connections

But wait..

There’s more

contentful-graph-web

​

Thank you.