Product related widgets in GraphQL

Question

I have a situation. We have built our Magento site as headless (data is provided from GQL). Category pages, PDP, catalog search result pages, etc all are headless except CMS pages because of product-related widgets.

We built all our components in Next JS with our business logic in GQL for the product query. However, because CMS page content with widgets is output as plain HTML via GQL, we cannot use our components meaning our business logic is ignored. It looks like we will have to do our logic in the PHTML again (redundant), which we want to avoid.

Has anyone done this in their project? If so, how did you avoid this situation?

This is standard GQL query for CMS page:

{
  cmsPage(identifier: "my-page-route") {
    identifier
    url_key
    title
    content
    content_heading
    page_layout
    meta_title
    meta_description
    meta_keywords
  }
}

Answer 1

You should not be querying the CMS page for the widget contents if you don't want HTML. If the widget doesn't have GraphQL access (I think it doesn't) then you need to query for products and sort by recent.

{
  products(sort: "created_at") {
    identifier
    url_key
    title
    sku
  }
}