Commerce Layer REST and GraphQL API + Laioutr: How the Frontend Connects
If you run Commerce Layer and want a modern frontend without building one from scratch, the integration question is simple: how does the frontend layer talk to Commerce Layer? This article walks through how Laioutr connects to the REST and GraphQL API and what stays where.
What the REST and GraphQL API provides
Commerce Layer deliberately ships no frontend; the presentation layer is entirely your choice. 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, Commerce Layer is the source of truth
Laioutr connects to the existing REST and GraphQL API as a configured layer, not a custom integration project. Commerce Layer 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 REST and GraphQL API responses
- Cart and checkout actions go through the API, so order logic stays in Commerce Layer
- Customer accounts and order history come from the API
- B2C and 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 Commerce Layer backend for read-heavy catalog traffic.
FAQ
Does Laioutr store our product data?
No. Data stays in Commerce Layer. Laioutr requests it at render time through the REST and GraphQL API; there is no duplicate datastore.
Is the backend touched during setup?
No backend re-architecture is required. You use the REST and GraphQL API and configure the Laioutr connect layer. See the Commerce Layer 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.