Stitch contentful entries with shopify products api
Commerce pages with CMS copy and live catalog
To stitch contentful entries with shopify products api, use one RealComposer pipeline with parallel steps. Contentful marketing fields plus Shopify SKU inventory in parallel. Your Next.js / React app makes one request instead of several sequential upstream calls.
Why Stitch contentful entries with shopify products api is hard without an edge proxy
Calling Contentful and Shopify directly from Next.js / React risks leaked secrets, CORS blocks, or oversized JSON that slows rendering.
- Exposed API keys in Next.js / React bundles or DevTools
- Sequential upstream calls on slow mobile networks
- Third-party rate limits and surprise billing spikes
How RealComposer Solves This at the Edge
Store credentials in Secret Vault
Save CONTENTFUL_ACCESS_TOKEN, SHOPIFY_ACCESS_TOKEN in RealComposer.
Configure edge pipeline
Add upstream steps with vault header injection and map the response fields your client needs.
Call from Next.js / React
Use your workspace edge URL with a restricted client token.
const res = await fetch('https://realcomposer.com/v1/workspace/stitch-contentful-with-shopify-products', {
headers: { Authorization: 'Bearer rc_live_client_token' }
});
const data = await res.json();
{
"status": 200,
"debug_trace": "trace_batch2",
"data": {
"id": "obj_batch2",
"status": "active",
"audit_logs": [
{
"action": "fetch",
"timestamp": 1714589200
}
],
"internal_metadata": {
"cluster": "edge"
},
"result": {
"name": "Sample",
"tags": [
"batch2"
]
}
}
}
{
"id": "obj_batch2",
"status": "active",
"result": {
"name": "Sample",
"tags": [
"batch2"
]
}
}
curl -X GET "https://realcomposer.com/v1/workspace/stitch-contentful-with-shopify-products" \ -H "Authorization: Bearer rc_live_client_token"
Developer Questions & Troubleshooting
Is it safe to call Contentful from Next.js / React?
Only if secrets stay off the device. RealComposer injects credentials on the server edge so clients never hold production keys.
Does RealComposer add latency?
Cloudflare edge execution adds a few milliseconds; caching can answer repeat calls in under 10ms.
Deploy this Next.js / React + Contentful, Shopify Recipe
Clone this pre-configured pipeline into your RealComposer workspace in one click. We pre-populate upstream URLs, headers, and mapping rules.