Registering multiple integrations

In some cases, you may want to communicate with multiple SAPCC instances. To do this, you can register multiple SAPCC integrations in your application. This requires additional configuration to avoid conflicts between the integrations.

Middleware configuration

First, you need to add multiple SAPCC integrations in middleware.config.ts file:

middleware.config.ts

export const config = {
  commerce: {
    location: "@vsf-enterprise/sapcc-api/server",
    configuration: { ... }, // configuration for the first SAPCC instance
    extensions: [ ... ]
  },
+  additionalCommerce: {
+    location: "@vsf-enterprise/sapcc-api/server",
+    configuration: { ... }, // configuration for the second SAPCC instance
+    extensions: [ ... ]
+  }
}

Avoiding conflicts

To avoid conflicts between the integrations, you need to ensure that both integrations won't use the same headers names, especially cookies. You can achieve it by configuring the headerNames function in middleware.config.ts file:

middleware.config.ts

export const config = {
  commerce: {
    location: "@vsf-enterprise/sapcc-api/server",
    configuration: { ... }, // configuration for the first SAPCC instance
    extensions: [ ... ]
  },
  additionalCommerce: {
    location: "@vsf-enterprise/sapcc-api/server",
    configuration: {
      ...
+      headerNames: {
+        tokenType: "custom tokenType header name",
+        userCookie: "custom userCookie header name",
+        authUserIdCookie: "custom authUserIdCookie header name",
+        authUserCookie: "custom authUserCookie header name",
+        authUserTokenCookie: "custom authUserTokenCookie header name",
+        currencyCookie: "custom currencyCookie header name",
+        localeCookie: "custom localeCookie header name",
+      }
    }, // configuration for the second SAPCC instance
    extensions: [ ... ]
  }
}

Every configuration key is optional, so you can provide only the headers that you want to change.

SDK configuration

Finally, modify the SDK configuration in sdk.config.ts file to let the SDK communicate with both instances:

sdk.config.ts

import { defineSdkConfig } from '@vue-storefront/next';
import type { CommerceEndpoints, UnifiedCmsEndpoints, UnifiedEndpoints } from 'storefront-middleware/types';

export function getSdkConfig() {
  return defineSdkConfig(({ buildModule, config, getRequestHeaders, middlewareModule }) => ({
    commerce: buildModule(middlewareModule<CommerceEndpoints>, {
      apiUrl: `${config.middlewareUrl}/commerce`,
      cdnCacheBustingId: config.cdnCacheBustingId,
      defaultRequestConfig: {
        headers: getRequestHeaders(),
      },
    }),
    unified: buildModule(middlewareModule<UnifiedEndpoints>, {
      apiUrl: `${config.middlewareUrl}/commerce/unified`,
      cdnCacheBustingId: config.cdnCacheBustingId,
      defaultRequestConfig: {
        headers: getRequestHeaders(),
      },
      methodsRequestConfig: config.defaultMethodsRequestConfig.unifiedCommerce.middlewareModule,
    }),
+    additionalCommerce: buildModule(middlewareModule<CommerceEndpoints>, {
+      apiUrl: `${config.middlewareUrl}/additionalCommerce`,
+      cdnCacheBustingId: config.cdnCacheBustingId,
+      defaultRequestConfig: {
+        headers: getRequestHeaders(),
+      },
+    }),
+    additionalUnified: buildModule(middlewareModule<UnifiedEndpoints>, {
+      apiUrl: `${config.middlewareUrl}/additionalCommerce/unified`,
+      cdnCacheBustingId: config.cdnCacheBustingId,
+      defaultRequestConfig: {
+        headers: getRequestHeaders(),
+      },
+      methodsRequestConfig: config.defaultMethodsRequestConfig.unifiedCommerce.middlewareModule,
+    }),
  }));
}