Simplified useData types

framework/commerce/cart/use-cart.tsx

@@ -5,7 +5,6 @@ import type { HookFetcherFn } from '../utils/types'
 import useData from '../utils/use-data-2'
 import { Provider, useCommerce } from '..'
 
-// Input expected by the `useCart` hook
 export type FetchCartInput = {
   cartId?: Cart['id']
 }
@@ -33,7 +32,7 @@ export const fetcher: HookFetcherFn<Cart | null, FetchCartInput> = async ({
 }
 
 export default function useCart<P extends Provider>(...input: UseCartInput<P>) {
-  const { providerRef, cartCookie } = useCommerce<P>()
+  const { providerRef, fetcherRef, cartCookie } = useCommerce<P>()
 
   const provider = providerRef.current
   const opts = provider.cart?.useCart
@@ -42,7 +41,11 @@ export default function useCart<P extends Provider>(...input: UseCartInput<P>) {
     context.input.cartId = Cookies.get(cartCookie)
     return fetcherFn(context)
   }
-  const response = useData(opts!, input, wrapper, opts?.swrOptions)
+  const response = useData(
+    { ...opts, fetcher: wrapper },
+    input,
+    provider.fetcher ?? fetcherRef.current
+  )
   const memoizedResponse = useMemo(
     () => (opts?.onResponse ? opts.onResponse(response) : response),
     [response]

framework/commerce/utils/types.ts

@@ -2,6 +2,10 @@ import type { ResponseState, SwrOptions } from './use-data'
 
 export type Override<T, K> = Omit<T, keyof K> & K
 
+// Returns the properties in T with the properties in type K changed from optional to required
+export type PickRequired<T, K extends keyof T> = Omit<T, K> &
+  Required<Pick<T, K>>
+
 // Core fetcher added by CommerceProvider
 export type Fetcher<T> = (options: FetcherOptions) => T | Promise<T>
 

framework/commerce/utils/use-data-2.ts

@@ -3,7 +3,8 @@ import type {
   HookHandler,
   HookInput,
   HookFetcher,
-  HookFetcherFn,
+  PickRequired,
+  Fetcher,
 } from './types'
 import defineProperty from './define-property'
 import { CommerceError } from './errors'
@@ -26,14 +27,15 @@ export type UseData = <
   Result = any,
   Body = any
 >(
-  options: HookHandler<Data, Input, FetchInput, Result, Body>,
+  options: PickRequired<
+    HookHandler<Data, Input, FetchInput, Result, Body>,
+    'fetcher'
+  >,
   input: HookInput,
-  fetcherFn: HookFetcherFn<Data, FetchInput, Result, Body>,
+  fetcherFn: Fetcher<any>
-  swrOptions?: SwrOptions<Data, FetchInput, Result>
 ) => ResponseState<Data>
 
-const useData: UseData = (options, input, fetcherFn, swrOptions) => {
+const useData: UseData = (options, input, fetcherFn) => {
-  const { fetcherRef } = useCommerce()
   const fetcher = async (
     url?: string,
     query?: string,
@@ -41,14 +43,14 @@ const useData: UseData = (options, input, fetcherFn, swrOptions) => {
     ...args: any[]
   ) => {
     try {
-      return await fetcherFn({
+      return await options.fetcher({
         options: { url, query, method },
         // Transform the input array into an object
         input: args.reduce((obj, val, i) => {
           obj[input[i][0]!] = val
           return obj
         }, {}),
-        fetch: fetcherRef.current,
+        fetch: fetcherFn,
         normalize: options.normalizer,
       })
     } catch (error) {
@@ -68,7 +70,7 @@ const useData: UseData = (options, input, fetcherFn, swrOptions) => {
         : null
     },
     fetcher,
-    swrOptions
+    options.swrOptions
   )
 
   if (!('isLoading' in response)) {