avoid circular dependency in bigcommerce

framework/bigcommerce/api/index.ts

@@ -4,8 +4,8 @@ import {
   CommerceAPIConfig,
   getCommerceApi as commerceApi,
 } from '@commerce/api'
-import fetchGraphqlApi from './utils/fetch-graphql-api'
-import fetchStoreApi from './utils/fetch-store-api'
+import createFetchGraphqlApi from './utils/fetch-graphql-api'
+import createFetchStoreApi from './utils/fetch-store-api'
 
 import type { CartAPI } from './endpoints/cart'
 import type { CustomerAPI } from './endpoints/customer'
@@ -68,14 +68,14 @@ const config: BigcommerceConfig = {
   customerCookie: 'SHOP_TOKEN',
   cartCookie: process.env.BIGCOMMERCE_CART_COOKIE ?? 'bc_cartId',
   cartCookieMaxAge: ONE_DAY * 30,
-  fetch: fetchGraphqlApi,
+  fetch: createFetchGraphqlApi(() => getCommerceApi().getConfig()),
   applyLocale: true,
   // REST API only
   storeApiUrl: STORE_API_URL,
   storeApiToken: STORE_API_TOKEN,
   storeApiClientId: STORE_API_CLIENT_ID,
   storeChannelId: STORE_CHANNEL_ID,
-  storeApiFetch: fetchStoreApi,
+  storeApiFetch: createFetchStoreApi(() => getCommerceApi().getConfig()),
 }
 
 const operations = {

framework/bigcommerce/api/utils/fetch-graphql-api.ts

@@ -1,15 +1,13 @@
 import { FetcherError } from '@commerce/utils/errors'
 import type { GraphQLFetcher } from '@commerce/api'
-import { provider } from '..'
+import type { BigcommerceConfig } from '../index'
 import fetch from './fetch'
 
-const fetchGraphqlApi: GraphQLFetcher = async (
-  query: string,
-  { variables, preview } = {},
-  fetchOptions
-) => {
+const fetchGraphqlApi: (getConfig: () => BigcommerceConfig) => GraphQLFetcher =
+  (getConfig) =>
+  async (query: string, { variables, preview } = {}, fetchOptions) => {
     // log.warn(query)
-  const { config } = provider
+    const config = getConfig()
     const res = await fetch(config.commerceUrl + (preview ? '/preview' : ''), {
       ...fetchOptions,
       method: 'POST',
@@ -33,6 +31,6 @@ const fetchGraphqlApi: GraphQLFetcher = async (
     }
 
     return { data: json.data, res }
-}
+  }
 
 export default fetchGraphqlApi

framework/bigcommerce/api/utils/fetch-store-api.ts

@@ -1,13 +1,12 @@
 import type { RequestInit, Response } from '@vercel/fetch'
-import { provider } from '..'
+import type { BigcommerceConfig } from '../index'
 import { BigcommerceApiError, BigcommerceNetworkError } from './errors'
 import fetch from './fetch'
 
-export default async function fetchStoreApi<T>(
-  endpoint: string,
-  options?: RequestInit
-): Promise<T> {
-  const { config } = provider
+const fetchStoreApi =
+  <T>(getConfig: () => BigcommerceConfig) =>
+  async (endpoint: string, options?: RequestInit): Promise<T> => {
+    const config = getConfig()
     let res: Response
 
     try {
@@ -50,7 +49,8 @@ export default async function fetchStoreApi<T>(
 
     // If something was removed, the response will be empty
     return res.status === 204 ? null : await res.json()
-}
+  }
+export default fetchStoreApi
 
 function getRawHeaders(res: Response) {
   const headers: { [key: string]: string } = {}