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, create a second integration config file alongside your existing one:

apps/storefront-middleware/integrations/additional-sapcc/config.ts

import type { ApiClientExtension, Integration } from '@alokai/connect/middleware';
import { type MiddlewareConfig } from '@vsf-enterprise/sapcc-api';

// ... env var validation for the second instance

export const config = {
  configuration: { ... }, // configuration for the second SAPCC instance
  extensions: (extensions: ApiClientExtension[]) => [ ...extensions ],
  location: '@vsf-enterprise/sapcc-api/server',
} satisfies Integration<MiddlewareConfig>;

Then register both integrations in middleware.config.ts:

apps/storefront-middleware/middleware.config.ts

  import type { MiddlewareConfig } from '@alokai/connect/middleware';
  import { config as commerceConfig } from '@/integrations/sapcc';
+ import { config as additionalCommerceConfig } from '@/integrations/additional-sapcc';

  export const config = {
    integrations: {
      commerce: commerceConfig,
+     additionalCommerce: additionalCommerceConfig,
    },
  } satisfies MiddlewareConfig;

Avoiding conflicts

To avoid conflicts between the integrations, you need to ensure that both integrations won't use the same header names, especially cookies. You can achieve it by configuring headerNames in the second integration's config:

apps/storefront-middleware/integrations/additional-sapcc/config.ts

  export const config = {
    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",
+     },
    },
    // ...
  } satisfies Integration<MiddlewareConfig>;

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

SDK configuration

Finally, add new SDK modules to communicate with the additional instance:

Create new files in the sdk/modules directory of your Next.js app for the additional commerce modules:

sdk/modules/additional-commerce.ts

import { sapccModule } from '@vsf-enterprise/sapcc-sdk';
import { defineSdkModule } from '@vue-storefront/next';
import type { CommerceEndpoints } from 'storefront-middleware/types';

export const additionalCommerce = defineSdkModule(({ buildModule, config, getRequestHeaders }) =>
  buildModule(sapccModule<CommerceEndpoints>, {
    apiUrl: `${config.apiUrl}/additionalCommerce`,
    ssrApiUrl: `${config.ssrApiUrl}/additionalCommerce`,
    defaultRequestConfig: {
      headers: getRequestHeaders(),
    },
  }),
);

sdk/modules/additional-unified.ts

import { sapccModule } from '@vsf-enterprise/sapcc-sdk';
import { defineSdkModule } from '@vue-storefront/next';
import type { UnifiedEndpoints } from 'storefront-middleware/types';

export const additionalUnified = defineSdkModule(({ buildModule, config, getRequestHeaders }) =>
  buildModule(sapccModule<UnifiedEndpoints>, {
    apiUrl: `${config.apiUrl}/additionalCommerce/unified`,
    ssrApiUrl: `${config.ssrApiUrl}/additionalCommerce/unified`,
    defaultRequestConfig: {
      headers: getRequestHeaders(),
    },
  }),
);

sdk/modules/index.ts

// ... other module exports
export * from './additional-commerce';
export * from './additional-unified';