Pages + metaobjects to use shopify as CMS for Hydrogen storefront

[MattDoesECom]

Hello shopify community,

I am currently trying to figure out if it's possible to use metaobjects in order to create flexible pages that are then rendered leveraging Hydrogen.

To explain a bit more in detail, when I create a new page in the Shopify store (see image)

This page is rendered through routing "app\routes\pages.$handle.tsx" as:

<div className="page">
      <header>
        <h1>{page.title}</h1>
      </header>
      <main dangerouslySetInnerHTML={{__html: page.body}} />
 </div>

How can I load and render meta objects entries (under Content -> Metaobjects in the shopify store) in this page? And are there ways to compose pages using meta objects?

[jamalsoueidan]

You need to query the metafields:

  query MetaobjectQuery ($country: CountryCode, $language: LanguageCode, $handle: String!, $type: String!)
    @inContext(country: $country, language: $language) {
    metaobject(handle: {handle: $handle, type: $type}) {
      ...
    }
  }

[MattDoesECom · Accepted solution]

In the end I realized that I could add metaobjects directly into Pages.
So what I did is a query to get all Metaobjects from a page:

query Page(
  $collectionKey: String!,
  $language: LanguageCode,
  $country: CountryCode,
  $handle: String!
)
@inContext(language: $language, country: $country) {
  page(handle: $handle) {
    id
    title
    body
    seo {
      description
      title
    }
    metafields (identifiers: [{ key: $collectionKey, namespace: "custom" }]) {
      references (first: 100) {
        nodes {
          ... Module
        }
      }
    }
  }
}

Where with module you can go deeper into metaobjects. This is the best approach I could find because it doesn't need an admin API.

Then I wrote a function that recursively maps the values to Typescript interfaces.

Finally I made a codegen script (which uses admin API) that retrieves all metaobjects definitions and translates them into the Typescript interfaces 🙂

Still, adding a CMS is definitely the better choice here!