Use fetch and Request from node-fetch in Spree SDK

framework/spree/api/utils/create-api-fetch.ts

@@ -12,7 +12,7 @@ import { SpreeSdkVariables } from 'framework/spree/types'
 import SpreeSdkMethodFromEndpointPathError from 'framework/spree/errors/SpreeSdkMethodFromEndpointPathError'
 import { GraphQLFetcher, GraphQLFetcherResult } from '@commerce/api'
 import createCreateFetchFetcher from '../../utils/createCreateFetchFetcher'
-import createVercelFetch from '@vercel/fetch'
+import fetch, { Request } from 'node-fetch'
 
 const createApiFetch: (
   getConfig: () => SpreeApiConfig
@@ -22,7 +22,10 @@ const createApiFetch: (
   const client = makeClient({
     host: requireConfigValue('spreeApiHost') as string,
     fetcherType: 'custom',
-    createFetcher: createCreateFetchFetcher({ fetch: createVercelFetch() }),
+    createFetcher: createCreateFetchFetcher({
+      fetch,
+      requestClass: Request,
+    }),
   })
 
   return async (url, queryData = {}, fetchOptions = {}) => {

framework/spree/fetcher.ts

@@ -17,18 +17,16 @@ import createCreateFetchFetcher from './utils/createCreateFetchFetcher'
 const client = makeClient({
   host: requireConfigValue('spreeApiHost') as string,
   fetcherType: 'custom',
-  createFetcher: createCreateFetchFetcher({ fetch: globalThis.fetch }),
+  createFetcher: createCreateFetchFetcher({
+    fetch: globalThis.fetch,
+    requestClass: globalThis.Request,
+  }),
 })
 
 const fetcher: Fetcher<
   GraphQLFetcherResult<JsonApiSingleResponse | JsonApiListResponse>,
   SpreeSdkVariables
 > = async (requestOptions) => {
-  // url?: string
-  // query?: string
-  // method?: string
-  // variables?: any
-  // body?: Body
   const { url, method, variables, query } = requestOptions
   const { locale, ...vars } = variables ?? {}
 

framework/spree/utils/createCreateFetchFetcher.ts

@@ -3,7 +3,7 @@ import { errors } from '@spree/storefront-api-v2-sdk'
 import type { CreateFetcher } from '@spree/storefront-api-v2-sdk/types/interfaces/ClientConfig'
 
 const createCreateFetchFetcher =
-  ({ fetch: rawFetch }): CreateFetcher =>
+  ({ fetch: rawFetch, requestClass }): CreateFetcher =>
   // TODO: Fix rawFetch any type.
   (fetcherOptions) => {
     const { FetchError } = errors
@@ -35,18 +35,20 @@ const createCreateFetchFetcher =
               })
           }
 
+          const request: Request = new requestClass(absoluteUrl.toString(), {
+            method: method.toUpperCase(),
+            headers: { ...sharedHeaders, ...headers },
+            ...payload,
+          })
+
           try {
-            const response = await rawFetch(absoluteUrl.toString(), {
-              method: method.toUpperCase(),
-              headers: { ...sharedHeaders, ...headers },
-              ...payload,
-            })
+            const response: Response = await rawFetch(request)
 
             const data = await response.json()
 
             if (!response.ok) {
               // Use the "traditional" approach and reject non 2xx responses.
-              throw new FetchError(response, null, data)
+              throw new FetchError(response, request, data)
             }
 
             return {
@@ -56,12 +58,16 @@ const createCreateFetchFetcher =
             }
           } catch (error) {
             if (error instanceof TypeError) {
-              throw new FetchError(null, null, null)
+              throw new FetchError(null, request, null)
             }
 
             throw error
           }
         } catch (error) {
+          if (error instanceof FetchError) {
+            throw error
+          }
+
           throw new FetchError(null, null, null, error.message)
         }
       },