update query cache on mutation

basementstudio · Sep 9, 2021 · b40d18c · b40d18c
1 parent e6eb7d2
commit b40d18c
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 24 deletions.
diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
     "name": "Julian Benegas",
     "url": "https://julianbenegas.com"
   },
-  "version": "0.6.6",
+  "version": "0.6.7",
   "main": "./dist/index.js",
   "module": "./dist/index.modern.js",
   "types": "./dist/index.d.ts",
@@ -16,6 +16,7 @@
   ],
   "scripts": {
     "prepublish": "yarn build",
+    "prebuild": "rm -rf dist",
     "build": "microbundle --jsx React.createElement --compress --no-sourcemap",
     "test": "jest"
   },

diff --git a/src/client/index.tsx b/src/client/index.tsx
@@ -41,7 +41,7 @@ export type Cart = Omit<
 
 type Context = {
   cartToggleState: ToggleState
-  cart: Cart | undefined
+  cart: Cart | undefined | null
   cartItemsCount: number | undefined
   onAddLineItem: (vars: {
     variantId: string
@@ -75,30 +75,29 @@ const ContextProvider = ({
     return createClient(config)
   }, [config])
 
-  const queryKey = React.useMemo(() => getQueryKey(localStorageCheckoutId), [
-    localStorageCheckoutId
-  ])
-
   React.useEffect(() => {
     const checkoutId = localStorage.getItem('checkout-id')
     if (checkoutId) setLocalStorageCheckoutId(checkoutId)
   }, [])
 
-  const { data: cart } = useQuery<Cart | undefined>(queryKey, {
-    enabled: !!localStorageCheckoutId,
-    queryFn: async () => {
-      if (!localStorageCheckoutId) return undefined
-      const checkout = await client.checkout.fetch(localStorageCheckoutId)
-      if (!checkout) {
-        // checkout has expired or doesn't exist
-        setLocalStorageCheckoutId(null)
-        localStorage.removeItem('checkout-id')
-        return undefined
-      }
-      return (checkout as unknown) as Cart
-    },
-    refetchOnWindowFocus: false
-  })
+  const { data: cart } = useQuery<Cart | undefined | null>(
+    getQueryKey(localStorageCheckoutId),
+    {
+      enabled: !!localStorageCheckoutId,
+      queryFn: async () => {
+        if (!localStorageCheckoutId) return undefined
+        const checkout = await client.checkout.fetch(localStorageCheckoutId)
+        if (!checkout) {
+          // checkout has expired or doesn't exist
+          setLocalStorageCheckoutId(null)
+          localStorage.removeItem('checkout-id')
+          return null
+        }
+        return (checkout as unknown) as Cart
+      },
+      refetchOnWindowFocus: false
+    }
+  )
 
   const createCheckout = React.useCallback(async () => {
     // TODO here we should implement a queue system to prevent throttling the Storefront API
@@ -135,7 +134,10 @@ const ContextProvider = ({
       return (checkout as unknown) as Cart
     },
     onSuccess: newCheckout => {
-      queryClient.setQueryData(queryKey, newCheckout)
+      queryClient.setQueryData(
+        getQueryKey(newCheckout.id.toString()),
+        newCheckout
+      )
     }
   })
 
@@ -155,7 +157,10 @@ const ContextProvider = ({
       return (checkout as unknown) as Cart
     },
     onSuccess: newCheckout => {
-      queryClient.setQueryData(queryKey, newCheckout)
+      queryClient.setQueryData(
+        getQueryKey(newCheckout.id.toString()),
+        newCheckout
+      )
     }
   })
 
@@ -169,7 +174,10 @@ const ContextProvider = ({
       return (checkout as unknown) as Cart
     },
     onSuccess: newCheckout => {
-      queryClient.setQueryData(queryKey, newCheckout)
+      queryClient.setQueryData(
+        getQueryKey(newCheckout.id.toString()),
+        newCheckout
+      )
     }
   })