PWA Studio

PWA Studio builds a React storefront on Magento's GraphQL API, replacing themes, layout XML and templates entirely.

Syntaxyarn create @magento/pwa

PWA Studio is Adobe's toolkit for building a React storefront that talks to Magento over GraphQL. Magento keeps the catalog, prices, cart and orders. Rendering moves into a Node and React application you build and deploy yourself.

The pieces

Three packages matter. Buildpack holds the build and configuration tooling. Peregrine is a set of React hooks and logic components; its data-loading hooks are called talons. Venia UI is the component library, and Venia is the reference storefront the scaffolder copies. UPWARD is a server specification that maps an incoming request to a resource, with upward-js as its reference implementation.

What it replaces

Themes, layout XML, .phtml, LESS, RequireJS and Knockout take no part. Nothing a module puts in view/frontend renders. Admin content tools that produce markup — widgets, CMS blocks, Page Builder — either return HTML as a GraphQL string that you render and style yourself, or are not exposed at all.

What it costs

Every third-party frontend has to be rebuilt in React. You run and monitor a Node process beside PHP. A Magento upgrade can change the GraphQL schema under you; the build validates your queries against the live schema, which catches that early. On the Magento side, a new GraphQL field means a schema file and a resolver, then bin/magento setup:upgrade and bin/magento cache:flush.

Status

PWA Studio still ships releases that track core versions, and 14.4.0 is the release matched to Magento 2.4.9. Adobe's strategic storefront is now Adobe Commerce Storefront on Edge Delivery Services, which does not support Magento Open Source. On Open Source, choosing PWA Studio today means owning its maintenance.

Example

Example · graphql
# src/queries/productDetail.graphql — sent to /graphql on the Magento backend
query ProductDetail($urlKey: String!) {
  products(filter: { url_key: { eq: $urlKey } }) {
    items {
      uid
      sku
      name
      price_range {
        minimum_price {
          final_price {
            value
            currency
          }
        }
      }
      ... on ConfigurableProduct {
        configurable_options {
          attribute_code
          label
          values {
            uid
            label
          }
        }
      }
    }
  }
}

When to use it

  • Decide whether an existing Venia-based storefront is worth keeping after a 2.4.9 upgrade.
  • Expose a custom product field so a React storefront can render it.
  • Work out why a storefront gets no cache hits from Varnish.

More examples

Scaffold a project and point it at a backend

MAGENTO_BACKEND_URL is the only link between the two halves. The storefront is deployed and versioned on its own; nothing about it lives in app/code, and Magento's deploy commands do not build it.

Example · bash
yarn create @magento/pwa
# copies the venia-concept template and asks for the backend URL

cd acme-storefront

# .env
#   MAGENTO_BACKEND_URL=https://staging.example.com/

yarn watch   # dev server on a generated local https origin
yarn build   # production bundle, served by an UPWARD server

Adding a field the storefront can query

A headless storefront can only show what the schema exposes, so new storefront data starts here. The resolver class implements Magento\Framework\GraphQl\Query\ResolverInterface. Apply it with bin/magento setup:upgrade then bin/magento cache:flush, and bin/magento setup:di:compile in production mode; until the cache is cleared the field is missing from the schema and the storefront build fails validation.

Example · graphql
# app/code/Acme/CatalogGraphQl/etc/schema.graphqls
interface ProductInterface {
    delivery_estimate: String
        @doc(description: "Estimated delivery date for this product")
        @resolver(class: "Acme\\CatalogGraphQl\\Model\\Resolver\\DeliveryEstimate")
}

Checking that a query is cacheable

Only GET queries are cached, and the queries Magento will cache are a fixed list that includes products, categoryList, cmsPage, cmsBlocks, route and storeConfig. X-Magento-Cache-Id, added in 2.4.4, is what lets a response be cached for a logged-in customer. If the header is absent the response was not cacheable.

Example · bash
curl -s -o /dev/null -D - -G \
  --data-urlencode 'query={storeConfig{store_code,locale}}' \
  https://staging.example.com/graphql

# HTTP/1.1 200 OK
# Content-Type: application/json
# X-Magento-Cache-Id: <hash>
# X-Magento-Tags: <tags>

Related

m2 graphql introm2 graphql schemam2 graphql cachem2 headlessm2 frontend choose

Discussion

  • Be the first to comment on this lesson.