Fix cart provider

components/cart/CartItem/CartItem.tsx

@@ -38,13 +38,11 @@ const CartItem = ({
 
   useEffect(() => {
     // Reset the quantity state if the item quantity changes
-    if (item.quantity !== quantity) {
+    if (item.quantity !== Number(quantity)) {
       setQuantity(item.quantity)
     }
   }, [item.quantity])
 
-  console.log('ITEM', item)
-
   return (
     <li className="flex flex-row space-x-6">
       <div className="h-12 w-12 bg-violet"></div>

lib/bigcommerce/cart/use-update-item.tsx

@@ -27,7 +27,7 @@ export default function useUpdateItem() {
   const fn = useCartUpdateItem<Cart, UpdateItemBody>(fetcher)
   const updateItem: typeof fn = async (input) => {
     const data = await fn(input)
-    await mutate(data)
+    await mutate(data, false)
     return data
   }
 

lib/commerce/cart/index.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, FC, useCallback, useMemo } from 'react'
+import { FC, createContext, useContext, useMemo } from 'react'
 import useSWR, { responseInterface } from 'swr'
 import Cookies from 'js-cookie'
 import { useCommerce } from '..'
@@ -11,28 +11,23 @@ export type CartProviderProps =
   | { query: string; url?: string }
   | { query?: string; url: string }
 
-const CartContext = createContext<CartResponse<any> | null>(null)
+const CartContext = createContext<{ query?: string; url?: string }>({})
 
 const CartProvider: FC<CartProviderProps> = ({ children, query, url }) => {
+  const value = useMemo(() => ({ query, url }), [query, url])
+  return <CartContext.Provider value={value}>{children}</CartContext.Provider>
+}
+
+function useCart<C>() {
   const { fetcher: fetch, cartCookie } = useCommerce()
   const fetcher = (url?: string, query?: string) => fetch({ url, query })
   const cartId = Cookies.get(cartCookie)
+  const { url, query } = useContext(CartContext)
   const response = useSWR(() => (cartId ? [url, query] : null), fetcher, {
     revalidateOnFocus: false,
   })
 
-  return (
-    // Avoid destructuring the `response` obj from SWR so we don't trigger the getters
-    // early, also the result of useSWR is memoized and it's better to keep it that way
-    // so we don't re-render every consumer
-    <CartContext.Provider value={Object.assign(response, { isEmpty: true })}>
-      {children}
-    </CartContext.Provider>
-  )
-}
-
-function useCart<C>() {
-  return useContext(CartContext) as CartResponse<C>
+  return Object.assign(response, { isEmpty: true }) as CartResponse<C>
 }
 
 export { CartProvider, useCart }