If you run Sana Commerce and want a modern frontend without building one from scratch, the integration question is simple: how does the frontend layer talk to Sana Commerce? This article walks through how Laioutr connects to the GraphQL API and what stays where.

What the GraphQL API provides

Sana is API-first and decouples frontend from backend over GraphQL, with a React SPA as the default frontend. The API serves product and catalog data, cart operations, customer accounts and checkout. Because the API is the contract, any frontend can consume it, including Laioutr.

Laioutr is the consumer, Sana Commerce is the source of truth

Laioutr connects to the existing GraphQL API as a configured layer, not a custom integration project. Sana Commerce remains the single source of truth: catalog, pricing, promotions, inventory and orders stay in the backend. There is no data duplication and no sync layer to keep consistent. The frontend requests data when it renders and sends cart and checkout actions back through the API.

What this means in practice

• Product and category pages render from live GraphQL API responses
• Cart and checkout actions go through the API, so order logic stays in Sana Commerce
• Customer accounts and order history come from the API
• B2B specifics are served through the API and rendered in Laioutr components

A configured layer, not a greenfield build

A custom frontend has to handle every API edge case itself. Laioutr ships the commerce components and their API behaviors prebuilt, so the connect step is configuration against your schema. Marketing teams then compose pages and campaigns on top without touching the integration.

Performance and hosting

Laioutr serves the frontend from an EU CDN with a Lighthouse 100 target and server-side rendering for SEO. Frontend-layer caching reduces load on the Sana Commerce backend for read-heavy catalog traffic.

FAQ

Does Laioutr store our product data?

No. Data stays in Sana Commerce. Laioutr requests it at render time through the GraphQL API; there is no duplicate datastore.

Is the backend touched during setup?

No backend re-architecture is required. You use the GraphQL API and configure the Laioutr connect layer. See the Sana Commerce pillar page or talk to our team.

More on Laioutr: Personalization.

Related reading: BigCommerce GraphQL Storefront API + Laioutr: How the Frontend Connects and Pimcore GraphQL API (Datahub) and REST + Laioutr: How the Frontend Connects.