Updated hooks

lib/bigcommerce/api/cart.ts

@@ -33,7 +33,7 @@ const cartApi: BigcommerceApiHandler = async (req, res, config) => {
         }
       }
 
-      return res.status(200).json({ cart: result.data ?? null })
+      return res.status(200).json({ data: result.data ?? null })
     }
 
     // Create or add a product to the cart
@@ -62,9 +62,7 @@ const cartApi: BigcommerceApiHandler = async (req, res, config) => {
         getCartCookie(name, data.id, config.cartCookieMaxAge)
       )
 
-      // There's no need to send any additional data here, the UI can use this response to display a
-      // "success" for the operation and revalidate the GET request for this same endpoint right after.
-      return res.status(200).json({ done: true })
+      return res.status(200).json({ done: { data } })
     }
   } catch (error) {
     const message =

lib/bigcommerce/cart/index.tsx

@@ -4,7 +4,7 @@ import {
   useCart as useCommerceCart,
 } from 'lib/commerce/cart'
 
-export type Cart = any
+export type Cart = {}
 
 export const CartProvider: FC = ({ children }) => {
   return <CommerceCartProvider url="/api/cart">{children}</CommerceCartProvider>

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

@@ -1,17 +1,9 @@
-import { Fetcher } from '@lib/commerce'
+import type { Fetcher } from '@lib/commerce'
 import { default as useCartAddItem } from '@lib/commerce/cart/use-add-item'
 import { Cart } from '.'
 
 async function fetcher(fetch: Fetcher<Cart>, { item }: { item: any }) {
-  const res = await fetch({ url: '/api/cart' })
-
-  // {
-  //   method: 'POST',
-  //   headers: {
-  //     'Content-Type': 'application/json',
-  //   },
-  //   body: JSON.stringify({ product }),
-  // }
+  return fetch({ url: '/api/cart', method: 'POST', body: { item } })
 }
 
 export default function useAddItem() {

lib/bigcommerce/index.tsx

@@ -23,11 +23,17 @@ async function getError(res: Response) {
 
 export const bigcommerceConfig: CommerceConfig = {
   locale: 'en-us',
-  async fetcher({ url, query }) {
-    const res = await fetch(url!)
+  async fetcher({ url, method = 'GET', variables, body: bodyObj }) {
+    const hasBody = Boolean(variables || bodyObj)
+    const body = hasBody
+      ? JSON.stringify(variables ? { variables } : bodyObj)
+      : undefined
+    const headers = hasBody ? { 'Content-Type': 'application/json' } : undefined
+    const res = await fetch(url!, { method, body, headers })
 
     if (res.ok) {
-      return res.json()
+      const { data } = await res.json()
+      return data
     }
 
     throw await getError(res)

lib/commerce/index.tsx

@@ -24,6 +24,9 @@ export type Fetcher<T> = (options: FetcherOptions) => T | Promise<T>
 export type FetcherOptions = {
   url?: string
   query?: string
+  method?: string
+  variables?: any
+  body?: any
 }
 
 export function CommerceProvider({ children, config }: CommerceProps) {