{"pageProps":{"error":null,"preview":false,"file":{"sha":"","fileRelativePath":"content/tina-cloud/docs/introduction/architecting-with-tina-cloud.md","data":{"frontmatter":{"title":"Architecting with Tina Cloud","id":"/tina-cloud/docs/introduction/architecting-with-tina-cloud","prev":"/tina-cloud/docs/index","next":"/tina-cloud/docs/introduction/tina-cloud-tina-cms"},"excerpt":" When architecting your site with Tina Cloud, the \"MVVM pattern\" (Model, View, View-Model) can be a good way to think of its implementation. Models A content model groups together fields for a given&hellip;","markdownBody":"\nWhen architecting your site with Tina Cloud, the \"MVVM pattern\" (Model, View, View-Model) can be a good way to think of its implementation.\n\n## Models\n\nA content model groups together fields for a given entity. In Tina Cloud, your content models are stored in your `.tina/templates` directory.\n\n```yml\n# .tina/front_matter/templates/hero.yml\n---\nlabel: Hero\nfields:\n  - name: id\n    type: text\n    label: Id\n  - name: heading\n    type: text\n    label: Heading\n  - name: message\n    type: text\n    label: Message\n```\n\n## View Models\n\nWhen you request content for a page, you do so by providing a query to the client:\n\n```js\nconst content = await client.requestWithForm(\n  gql => gql`\n      query ContentQuery($section: String!,\n      $relativePath: String!) {\n        getDocument(section: $section, relativePath: $relativePath) {\n          hero: {\n            heading\n            message\n          }\n        }\n      }\n    `,\n  {\n    variables: {\n      section: 'pages',\n      relativePath: 'home.md',\n      slug: ['/'],\n    },\n  }\n)\n\nconst hero = content.getDocument.data.hero\n// ...\n```\n\nIn 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.\n\n## Views\n\nThe \"view\" is what the user sees when they navigate to your site. Views dictate how your content is rendered on the screen.\n\n```jsx\nexport const Hero = styled(({ heroProps }) => {\n  return (\n    <div {...styleProps}>\n      <h2>{heroProps.title}</h2>\n      <p>{heroProps.message}</p>\n    </div>\n  )\n})`\n```\n"}},"tocItems":"  - [Models](#models)\n  - [View Models](#view-models)\n  - [Views](#views)\n","docsNav":[{"title":"Introduction","id":"introduction","items":[{"id":"/tina-cloud/docs/index","slug":"/tina-cloud/docs/index","title":"What is Tina Cloud?"},{"id":"/tina-cloud/docs/introduction/architecting-with-tina-cloud","slug":"/tina-cloud/docs/introduction/architecting-with-tina-cloud","title":"Architecting with Tina Cloud"},{"id":"/tina-cloud/docs/introduction/tina-cloud-tina-cms","slug":"/tina-cloud/docs/introduction/tina-cloud-tina-cms","title":"How does Tina Cloud fit with TinaCMS?"}]},{"title":"Concepts","id":"concepts","items":[{"id":"/tina-cloud/docs/concepts/organizations","slug":"/tina-cloud/docs/concepts/organizations","title":"Organizations"},{"id":"/tina-cloud/docs/concepts/apps","slug":"/tina-cloud/docs/concepts/apps","title":"Apps"},{"id":"/tina-cloud/docs/concepts/content-modeling","slug":"/tina-cloud/docs/concepts/content-modeling","title":"Content Modeling"},{"id":"/tina-cloud/docs/concepts/git-backed-content","slug":"/tina-cloud/docs/concepts/git-backed-content","title":"Git-backed Content"}]},{"title":"Guides","id":"guides","items":[{"id":"/tina-cloud/docs/guides/setup-tina-cloud-app","slug":"/tina-cloud/docs/guides/setup-tina-cloud-app","title":"Setup an app with Tina Cloud"},{"id":"/tina-cloud/docs/guides/setup-tina-cloud-client","slug":"/tina-cloud/docs/guides/setup-tina-cloud-client","title":"Setup a Tina Cloud Client"}]},{"title":"Reference","id":"api-reference","items":[{"id":"/tina-cloud/docs/reference/config-files/index","slug":"/tina-cloud/docs/reference/config-files/index","title":"Config Files","items":[{"id":"/tina-cloud/docs/reference/config-files/settings","slug":"/tina-cloud/docs/reference/config-files/settings","title":"Settings"},{"id":"/tina-cloud/docs/reference/config-files/front-matter-templates","slug":"/tina-cloud/docs/reference/config-files/front-matter-templates","title":"Front Matter Templates"},{"id":"/tina-cloud/docs/reference/config-files/schema","slug":"/tina-cloud/docs/reference/config-files/schema","title":"Schema"}]},{"id":"/tina-cloud/docs/reference/content-api","slug":"/tina-cloud/docs/reference/content-api","title":"Content API","items":[{"id":"/tina-cloud/docs/reference/tina-cloud-client","slug":"/tina-cloud/docs/reference/tina-cloud-client","title":"Tina Cloud Client"},{"id":"/tina-cloud/docs/reference/graphql","slug":"/tina-cloud/docs/reference/graphql","title":"GraphQL Gateway"},{"id":"/tina-cloud/docs/reference/packages","slug":"/tina-cloud/docs/reference/packages","title":"Packages"}]},{"id":"/tina-cloud/docs/reference/tina-cli","slug":"/tina-cloud/docs/reference/tina-cli","title":"Tina CLI","items":[{"id":"/tina-cloud/docs/reference/tina-cli-commands","slug":"/tina-cloud/docs/reference/tina-cli-commands","title":"Commands"}]},{"id":"/tina-cloud/docs/reference/faq","slug":"/tina-cloud/docs/reference/faq","title":"Frequently Asked Questions"}]}],"nextPage":{"slug":"/tina-cloud/docs/introduction/tina-cloud-tina-cms","title":"How does Tina Cloud fit with TinaCMS"},"prevPage":{"slug":"/tina-cloud/docs/index","title":"Tina Cloud"}},"__N_SSG":true}