When architecting your site with Tina Cloud, the "MVVM pattern" (Model, View, View-Model) can be a good way to think of its implementation.
A content model groups together fields for a given entity. In Tina Cloud, your content models are stored in your .tina/templates directory.
# .tina/front_matter/templates/hero.yml
---
label: Hero
fields:
- name: id
type: text
label: Id
- name: heading
type: text
label: Heading
- name: message
type: text
label: MessageWhen you request content for a page, you do so by providing a query to the client:
const content = await client.requestWithForm(
gql => gql`
query ContentQuery($section: String!,
$relativePath: String!) {
getDocument(section: $section, relativePath: $relativePath) {
hero: {
heading
message
}
}
}
`,
{
variables: {
section: 'pages',
relativePath: 'home.md',
slug: ['/'],
},
}
)
const hero = content.getDocument.data.hero
// ...In this example, the "hero" object that the client returns can be thought of as your “view-model”, and will contain a subset of fields from your model.
The "view" is what the user sees when they navigate to your site. Views dictate how your content is rendered on the screen.
export const Hero = styled(({ heroProps }) => {
return (
<div {...styleProps}>
<h2>{heroProps.title}</h2>
<p>{heroProps.message}</p>
</div>
)
})`