Add configuration to show product options when there's one variant available

framework/spree/api/operations/get-all-products.ts

@@ -55,10 +55,9 @@ export default function getAllProductsOperation({
     const config = commerce.getConfig(userConfig)
     const { fetch: apiFetch } = config // TODO: Send config.locale to Spree.
 
-    const { data: spreeSuccessResponse } = await apiFetch<IProducts>(
-      '__UNUSED__',
-      { variables }
-    )
+    const {
+      data: { data: spreeSuccessResponse },
+    } = await apiFetch<{ data: IProducts }>('__UNUSED__', { variables })
 
     const normalizedProducts: Product[] = spreeSuccessResponse.data.map(
       (spreeProduct) => normalizeProduct(spreeSuccessResponse, spreeProduct)

framework/spree/api/operations/get-product.ts

@@ -61,10 +61,9 @@ export default function getProductOperation({
     const config = commerce.getConfig(userConfig)
     const { fetch: apiFetch } = config // TODO: Send config.locale to Spree.
 
-    const { data: spreeSuccessResponse } = await apiFetch<IProduct>(
-      '__UNUSED__',
-      { variables }
-    )
+    const {
+      data: { data: spreeSuccessResponse },
+    } = await apiFetch<{ data: IProduct }>('__UNUSED__', { variables })
 
     return {
       product: normalizeProduct(

framework/spree/api/operations/get-site-info.ts

@@ -84,21 +84,25 @@ export default function getSiteInfoOperation({
     const config = commerce.getConfig(userConfig)
     const { fetch: apiFetch } = config // TODO: Send config.locale to Spree.
 
-    const { data: spreeCategoriesSuccessResponse } = await apiFetch<ITaxons>(
-      '__UNUSED__',
-      {
-        variables: createVariables(
-          requireConfigValue('spreeCategoriesTaxonomyId')
-        ),
-      }
-    )
+    const {
+      data: { data: spreeCategoriesSuccessResponse },
+    } = await apiFetch<{
+      data: ITaxons
+    }>('__UNUSED__', {
+      variables: createVariables(
+        requireConfigValue('spreeCategoriesTaxonomyId') as string
+      ),
+    })
 
-    const { data: spreeBrandsSuccessResponse } = await apiFetch<ITaxons>(
-      '__UNUSED__',
-      {
-        variables: createVariables(requireConfigValue('spreeBrandsTaxonomyId')),
-      }
-    )
+    const {
+      data: { data: spreeBrandsSuccessResponse },
+    } = await apiFetch<{
+      data: ITaxons
+    }>('__UNUSED__', {
+      variables: createVariables(
+        requireConfigValue('spreeBrandsTaxonomyId') as string
+      ),
+    })
 
     const normalizedCategories: GetSiteInfoOperation['data']['categories'] =
       spreeCategoriesSuccessResponse.data.sort(taxonsSort).map((spreeTaxon) => {

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

@@ -1,4 +1,3 @@
-import { GraphQLFetcher, GraphQLFetcherResult } from '@commerce/api'
 import { SpreeApiConfig } from '..'
 import { errors, makeClient } from '@spree/storefront-api-v2-sdk'
 import { requireConfigValue } from 'framework/spree/isomorphicConfig'
@@ -6,18 +5,25 @@ import convertSpreeErrorToGraphQlError from 'framework/spree/utils/convertSpreeE
 import type { ResultResponse } from '@spree/storefront-api-v2-sdk/types/interfaces/ResultResponse'
 import type {
   JsonApiListResponse,
-  JsonApiResponse,
+  JsonApiSingleResponse,
 } from '@spree/storefront-api-v2-sdk/types/interfaces/JsonApi'
 import getSpreeSdkMethodFromEndpointPath from 'framework/spree/utils/getSpreeSdkMethodFromEndpointPath'
 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'
 
 const createApiFetch: (
   getConfig: () => SpreeApiConfig
 ) => GraphQLFetcher<GraphQLFetcherResult<any>, SpreeSdkVariables> = (
-  getConfig
+  _getConfig
 ) => {
-  const client = makeClient({ host: requireConfigValue('spreeApiHost') })
+  const client = makeClient({
+    host: requireConfigValue('spreeApiHost') as string,
+    fetcherType: 'custom',
+    createFetcher: createCreateFetchFetcher({ fetch: createVercelFetch() }),
+  })
 
   return async (url, queryData = {}, fetchOptions = {}) => {
     console.log(
@@ -38,22 +44,23 @@ const createApiFetch: (
       )
     }
 
-    const storeResponse: ResultResponse<JsonApiResponse | JsonApiListResponse> =
-      await getSpreeSdkMethodFromEndpointPath(
-        client,
-        variables.methodPath
-      )(...variables.arguments)
+    const storeResponse: ResultResponse<
+      JsonApiSingleResponse | JsonApiListResponse
+    > = await getSpreeSdkMethodFromEndpointPath(
+      client,
+      variables.methodPath
+    )(...variables.arguments)
+
+    if (storeResponse.isSuccess()) {
+      const data = storeResponse.success()
+      const rawFetchRespone = Object.getPrototypeOf(data).response
 
-    if (storeResponse.success()) {
       return {
-        data: storeResponse.success(),
-        res: storeResponse as any, //FIXME: MUST BE fetch() RESPONSE instead of axios.
+        data,
+        res: rawFetchRespone,
       }
     }
 
-    // FIXME: Allow Spree SDK to use fetch instead of axios
-    // (https://github.com/spree/spree-storefront-api-v2-js-sdk/issues/189)
-
     const storeResponseError = storeResponse.fail()
 
     if (storeResponseError instanceof errors.SpreeError) {