Upgrade to Spree 5.4 media system - #65
Conversation
- Bump @spree/sdk and @spree/next to 0.11.0 - expand: ['images'] → expand: ['media'] on PDP - Image type → Media type imports - product.images → product.media, variant.images → variant.media - Update SEO and metadata to use product.media All image URL fields (original_url, large_url, og_image_url, thumbnail_url) remain unchanged — only the container changed from images to media. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (1)
WalkthroughMigrates product image handling from the legacy Changes
Sequence Diagram(s)(Skipped — changes are type/data-field migrations and dependency bumps; no new multi-component control flow requiring a sequence diagram.) Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
📝 Coding Plan
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@src/app/`[country]/[locale]/(storefront)/products/[slug]/ProductDetailsWrapper.tsx:
- Around line 31-33: The getProduct call uses different expand keys across
rendering paths causing payload drift; update the expansions to use "media"
everywhere so the server and client shapes match—specifically change the
getProduct expansion in the other fetch (the call in page.tsx that currently
uses ["images"]) to use ["media"] (and ensure any other getProduct invocations
like the one in ProductDetailsWrapper.tsx continue to include "media" alongside
"variants" and "option_types") so both fetches request the same fields.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 38c47d72-55f9-4f23-8626-449f47314f8e
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (6)
package.jsonsrc/app/[country]/[locale]/(storefront)/products/[slug]/ProductDetails.tsxsrc/app/[country]/[locale]/(storefront)/products/[slug]/ProductDetailsWrapper.tsxsrc/components/products/MediaGallery.tsxsrc/lib/metadata/product.tssrc/lib/seo.ts
| const data = await getProduct(slug, { | ||
| expand: ["variants", "images", "option_types"], | ||
| expand: ["variants", "media", "option_types"], | ||
| }); |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify there are no remaining product fetches expanding "images"
rg -n -C2 --type=ts --type=tsx \
'getCachedProduct\s*\([^)]*\["images"\]|expand:\s*\[[^]]*"images"'Repository: spree/storefront
Length of output: 87
🏁 Script executed:
#!/bin/bash
# Search for product fetch calls with expand parameters
# Using correct rg syntax for TypeScript files
rg -n -C2 'expand:\s*\[' --type=ts src/app
# Also search for getCachedProduct or getProduct calls
rg -n 'getProduct|getCachedProduct' --type=ts src/app | head -30Repository: spree/storefront
Length of output: 1881
Align all product fetch expansions to media instead of mixed images and media.
Product details for the same view are fetched with different expansions: src/app/[country]/[locale]/(storefront)/products/[slug]/page.tsx (line 29) uses ["images"] while src/app/[country]/[locale]/(storefront)/products/[slug]/ProductDetailsWrapper.tsx (line 32) uses ["media"]. This inconsistency can cause payload drift and create issues when the data shape differs between server and client rendering paths.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In
`@src/app/`[country]/[locale]/(storefront)/products/[slug]/ProductDetailsWrapper.tsx
around lines 31 - 33, The getProduct call uses different expand keys across
rendering paths causing payload drift; update the expansions to use "media"
everywhere so the server and client shapes match—specifically change the
getProduct expansion in the other fetch (the call in page.tsx that currently
uses ["images"]) to use ["media"] (and ensure any other getProduct invocations
like the one in ProductDetailsWrapper.tsx continue to include "media" alongside
"variants" and "option_types") so both fetches request the same fields.
CI uses npm ci which requires package-lock.json in sync with package.json. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Server-side product fetch in page.tsx was still using ["images"] while client-side ProductDetailsWrapper.tsx used ["media"]. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 participant
Summary
Updates the storefront to use Spree 5.4's new media system where
imagesis renamed tomediathroughout the Store API.@spree/sdkand@spree/nextto 0.11.0expand: ['images']→expand: ['media']on PDPImagetype →Mediatype importsproduct.images→product.media,variant.images→variant.mediaproduct.mediaAll image URL fields (
original_url,large_url,og_image_url,thumbnail_url) remain unchanged — only the container array changed fromimagestomedia.Test plan
thumbnail_urlwhich didn't change)🤖 Generated with Claude Code
Summary by CodeRabbit
Chores
Refactor