feat(shopify-assets)!: migrate react-photo-album to v3 catalog - #1822
Draft
stipsan wants to merge 4 commits into
Draft
feat(shopify-assets)!: migrate react-photo-album to v3 catalog#1822stipsan wants to merge 4 commits into
stipsan wants to merge 4 commits into
Conversation
Upgrade the shared react-photo-album catalog to ^3.6.1 and migrate sanity-plugin-shopify-assets to the v3 RowsPhotoAlbum + scroll API (matching asset-source-unsplash), so it can use catalog: and drop the v2-only react-infinite-scroll-component/rxjs search path.
🦋 Changeset detectedLatest commit: 827e457 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
✅ E2E Tests🟢 26 passed • view full report • view run Studio: https://plugins-e2e-test-studio-ifl2oxrxa.sanity.dev Datasets: |
Coverage Report
File Coverage
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Resolve pnpm-lock.yaml conflict by regenerating the lockfile from main's baseline against the merged manifests.
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 2 potential issues.
Bugbot Autofix prepared fixes for both issues found in the latest run.
- ✅ Fixed: Debounce clears fetch errors
- Removed the unconditional
setApiError('')from the debounce effect so a fast initial fetch failure keeps its error message, since errors are now discarded automatically when a new request supersedes them.
- Removed the unconditional
- ✅ Fixed: Stale requests overwrite gallery
- Errors are now tagged with the request that produced them and only rendered when the tag matches the current request, so late failures from superseded queries or unmounted galleries are ignored.
Or push these changes by commenting:
@cursor push 3fe368b137
Preview (3fe368b137)
diff --git a/plugins/sanity-plugin-shopify-assets/src/components/ShopifyAssetPicker.tsx b/plugins/sanity-plugin-shopify-assets/src/components/ShopifyAssetPicker.tsx
--- a/plugins/sanity-plugin-shopify-assets/src/components/ShopifyAssetPicker.tsx
+++ b/plugins/sanity-plugin-shopify-assets/src/components/ShopifyAssetPicker.tsx
@@ -89,16 +89,11 @@
const [query, setQuery] = useState('')
const [debouncedQuery, setDebouncedQuery] = useState('')
- const [apiError, setApiError] = useState('')
+ const [apiError, setApiError] = useState<{token: object; message: string} | null>(null)
const scrollContainerRef = useRef<HTMLDivElement>(null)
- const error = shopifyDomain
- ? apiError
- : 'Please configure your Shopify domain in the plugin config'
-
useEffect(() => {
const timeout = window.setTimeout(() => {
- setApiError('')
setDebouncedQuery(query)
}, SEARCH_DEBOUNCE_MS)
@@ -116,18 +111,29 @@
[projectId, dataset, shopifyDomain, token],
)
- const initialDataPromise = useMemo(
- () =>
- fetcher(debouncedQuery, '').catch((err: unknown) => {
- setApiError(getErrorMessage(err))
+ const request = useMemo(() => {
+ // Errors are tagged so failures from superseded requests are ignored.
+ const requestToken = {}
+ const onError = (message: string) => setApiError({token: requestToken, message})
+
+ return {
+ token: requestToken,
+ onError,
+ promise: fetcher(debouncedQuery, '').catch((err: unknown) => {
+ onError(getErrorMessage(err))
return {
assets: [],
pageInfo: {cursor: '', hasNextPage: false},
} satisfies ShopifyAPIResponse
}),
- [debouncedQuery, fetcher],
- )
+ }
+ }, [debouncedQuery, fetcher])
+ const apiErrorMessage = apiError?.token === request.token ? apiError.message : ''
+ const error = shopifyDomain
+ ? apiErrorMessage
+ : 'Please configure your Shopify domain in the plugin config'
+
const handleSearchTermChanged = (event: ChangeEvent<HTMLInputElement>) => {
setQuery(event.currentTarget.value)
}
@@ -194,8 +200,8 @@
fetcher={fetcher}
scrollContainerRef={scrollContainerRef}
onSelect={handleSelect}
- onError={setApiError}
- initialDataPromise={initialDataPromise}
+ onError={request.onError}
+ initialDataPromise={request.promise}
/>
</Suspense>
</>You can send follow-ups to the cloud agent here.
Reviewed by Cursor Bugbot for commit 37c832b. Configure here.
Errors lived in component state written from async callbacks that were not tied to the query that produced them, so the search debounce timer could clear a fresh failure and a superseded query's rejection could replace newer results with a blocking error. Resolve each query's request to a loaded/failed result consumed through the per-query Suspense boundary, and let load-more rejections surface via the InfiniteScroll error slot so the search input stays usable.
Resolve pnpm-lock.yaml conflict by regenerating the lockfile from main's baseline against the merged manifests.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Replaces #1798 (Renovate-only bump without the v2→v3 API migration).
Summary
react-photo-albumcatalog^3.6.0→^3.6.1sanity-plugin-shopify-assetsto the v3 API (major), followingsanity-plugin-asset-source-unsplash:PhotoAlbum layout="rows"→RowsPhotoAlbum+react-photo-album/rows.cssreact-infinite-scroll-component→react-photo-album/scrollrender.extrasoverlayscomponentsProps.containerProps→componentsProps.containerfetchAssetsdatastore (drops rxjs subjects for search)"react-photo-album": "catalog:"sanity-plugin-asset-source-unsplash(catalog consumer)Test plan
pnpm formatpnpm lintpnpm knipsanity-plugin-shopify-assets+sanity-plugin-asset-source-unsplashvitestforsanity-plugin-shopify-assets