← All projectsARCHITECTURE CASE STUDY

Switch

A GraphQL-only Adobe Commerce backend for a headless PWA storefront in Saudi Arabia — no classic theme at all — centred on a drag-and-drop homepage builder.

Business
Retail, Saudi Arabia
Platform
Adobe Commerce, GraphQL only
Frontend
A separate PWA application
My focus
GraphQL schema, resolvers and backend features
Adobe CommerceGraphQL onlyHeadless PWATabby BNPLStore locator
GraphQL schema domains extended
8
HIGHLIGHTS

Five things that set this build apart.

  • GraphQL only

    No Luma theme: every customer-facing page comes from the PWA.

  • Homepage builder

    Drag-and-drop banners, products, categories and CMS blocks.

  • Store locator

    Physical stores and per-product availability over GraphQL.

  • Root-caused cart bug

    Dropped product options traced to the cart-mutation resolver.

  • Warranty products

    Linked to the products they cover and added alongside them.

ARCHITECTURE OVERVIEW

A backend that only speaks GraphQL.

The PWA is the storefront; Magento serves it entirely through an extended GraphQL schema.

ClientsBackendSchema domainsPWA storefrontGraphQL APIAdobe Commerceheadless backendHomepage builderStore locatorWarranty productsBack-in-stock alertsCatalog & reviewsproducts, compare list, reviewsCustomer & wishlistaccounts, wishlist, product alertsCheckout & configcart, store config, TabbyGraphQL modules throughoutComposite homepage resolver8 schema domains extended
What makes it different

The customer never touches a Magento template: every page in the PWA is built from GraphQL responses.

WHAT THE PLATFORM DOES

What the platform does.

  • GraphQL schema

    Extended across catalog, customer, checkout, store config, compare list, wishlist, reviews and product alerts.

  • Homepage builder

    A drag-and-drop homepage/dashboard builder exposed through a composite GraphQL resolver.

  • Store locator

    Physical store CRUD plus per-product store availability over GraphQL.

  • Warranty products

    Warranty products linked to the products they cover and added to the cart alongside them.

  • Merchandising

    A configurable brand-logo slider exposed over GraphQL.

  • Alerts

    A back-in-stock “notify me” mutation.

  • Payments

    Tabby buy-now-pay-later merchant configuration exposed via the StoreConfig GraphQL type.

  • Catalog fields

    Estimated-delivery and pre-order fields on products, review averages, category promotion banners, and a compare list capped at 4 products.

  • Search

    An in-stock layered-navigation filter on Elasticsearch.

  • Accounts & config

    A social-login mutation, plus header/footer blocks, an announcement bar, a minimum order amount and a newsletter-unsubscribe mutation.

HOW THE HOMEPAGE IS BUILT

Arranged in admin, served in one query.

The homepage is composed in the admin and delivered to the PWA through a single resolver.

  1. STEP 1

    Arrange

    Banner, product, category and CMS-block sliders are placed in the drag-and-drop builder.

  2. STEP 2

    Resolve

    One composite GraphQL resolver returns the whole layout.

  3. STEP 3

    Render

    The PWA draws the homepage from that response.

KEY TECHNICAL CHALLENGES

Headless means everything goes through the API.

With no theme to fall back on, every feature and every bug lives in GraphQL.

  1. A silent cart bug

    Customisable product options were dropped on add-to-cart — but only through GraphQL.

    Solution

    Traced it to the cart-mutation resolver rather than the cart logic, and fixed it with a narrowly scoped override.

    Result

    Options reach the cart from the PWA, with the underlying cart logic untouched.

  2. Full feature coverage

    The PWA needed every storefront feature over GraphQL.

    Solution

    Extended the schema across catalog, customer, checkout, store config, compare list, wishlist, reviews and product alerts.

  3. An editable homepage

    With no theme layer, homepage content still had to be arranged in admin.

    Solution

    A drag-and-drop builder delivered through a composite GraphQL resolver.

The composite resolverOne query returns the whole homepage layout.
BuilderlayoutCompositeresolverPWAhomepage
Where the cart bug livedThe fix targeted the resolver, not the cart.
PWAadd-to-cartCart mutationresolverCart
DESIGN DECISIONS

The options weighed, and the trade-offs accepted.

How the hardest calls were made: what else was on the table, why it lost, and what the chosen design costs.

Closing a GraphQL-only cart bug

Customisable options vanished when products were added to cart through the GraphQL mutation, but worked in the classic storefront — so the bug lived in the GraphQL path.

  1. Patch the PWA to resend the options — any other GraphQL client still breaks
  2. Override Magento’s core addProduct path — a large, heavily used surface
  3. A narrow override at the exact method that loses the data (chosen)
Decision

Kept the fix as small as possible, applied where the option data was dropped, so every GraphQL client gets correct cart behaviour.

Trade-off accepted

Even a narrow override needs re-checking when Magento changes that class, so the reason for it has to be documented.

TECHNOLOGIES & INTEGRATIONS

The stack behind it.

Core platform
Adobe CommercePHPGraphQL
Frontend
Headless PWA (separate app)
Payments
Tabby
Skills shown
Headless commerceGraphQL schema designAPI designDebugging
FULL BUILD LOG

The work, piece by piece.

  1. GraphQL-only backend with no classic Luma theme; the customer-facing frontend is a separate PWA.

  2. Drag-and-drop homepage/dashboard builder exposed through a composite GraphQL resolver.

  3. Extended the GraphQL schema across catalog, customer, checkout, store config, compare list, wishlist, reviews and product alerts.

  4. GraphQL store locator (store CRUD plus per-product availability) and warranty products attached to the items they cover.

  5. Fixed customisable options being dropped on add-to-cart, traced to the cart-mutation resolver.

  6. Brand-logo slider, back-in-stock “notify me” mutation, and Tabby merchant config exposed via StoreConfig.

Facing a similar commerce problem?

I'm available immediately for senior Adobe Commerce roles and contract work. Tell me what you're building.