feat: add optional fetcher key to CartForm (#1792)

* feat: add optional fetcher key to CartForm * fix: formatting error * Update .changeset/blue-garlics-obey.md --------- Co-authored-by: Helen Lin <helen.lin@shopify.com>
Shopify · Mar 11, 2024 · 351b3c1 · 351b3c1
1 parent 90ee0f8
commit 351b3c1
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/.changeset/blue-garlics-obey.md b/.changeset/blue-garlics-obey.md
@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen': patch
+---
+
+add optional fetcher key to CartForm
diff --git a/packages/hydrogen/src/cart/CartForm.tsx b/packages/hydrogen/src/cart/CartForm.tsx
@@ -178,6 +178,11 @@ type CartFormCommonProps = {
    * The route to submit the form to. Defaults to the current route.
    */
   route?: string;
+  /**
+   * Optional key to use for the fetcher.
+   * @see https://remix.run/hooks/use-fetcher#key
+   */
+  fetcherKey?: string;
 };
 
 type CartActionInputProps =
@@ -217,8 +222,9 @@ export function CartForm({
   action,
   inputs,
   route,
+  fetcherKey,
 }: CartFormProps): JSX.Element {
-  const fetcher = useFetcher();
+  const fetcher = useFetcher({key: fetcherKey});
 
   return (
     <fetcher.Form action={route || ''} method="post">