feat: add optional fetcher key to CartForm #1792
Merged
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.
WHY are these changes introduced?
Improve developers' experience by giving them access to a CartForm's fetcher outside the component where the fetcher is created.
For example, if I have a CartFrom that opens a drawer after a product has been added to the cart, I would like to display a pending UI while the form route is being called. To do this, I need to know the value of a
fetcher.state
that is scoped outside of the modal.By passing a key to the CartForm's useFetcher hook, I can access that fetcher anywhere in my app:
WHAT is this pull request doing?
Adds an optional
fetcherKey
prop topackages/hydrogen/src/cart/CartForm.tsx
and passes it to the component'suseFetcher
hook.HOW to test your changes?
@shopify/hydrogen
and run a demo app.CarForm
is an abstraction of an existing API (useFetcher()
) and this feature builds on top of that API, it shouldn't affect test coveragePost-merge steps
Checklist