Generated API

[your SAPCC_API_URI here]/api-docs

npx @openapitools/openapi-generator-cli generate --input-spec [your SAPCC instance's OpenAPI schema URI here] --generator-name typescript-axios --output custom-sapcc-openapi --skip-validate-spec --openapi-normalizer SET_TAGS_FOR_ALL_OPERATIONS=sapcc --additional-properties=useSingleRequestParameter=true,supportsES6=true

  import { WithoutDefaults } from "@vsf-enterprise/sapcc-api";
+ import { SapccApi } from "./custom-sapcc-openapi";
 
  export type { Endpoints as UnifiedEndpoints } from "@vsf-enterprise/unified-api-sapcc";
  export type { Endpoints as CommerceEndpoints } from "@vsf-enterprise/sapcc-api";
+ export type CustomSapccEndpoints = WithoutDefaults<SapccApi>;

import { ApiClientExtension } from "@vue-storefront/middleware";
import { createProxyApi } from "@vsf-enterprise/sapcc-api";
import { CustomSapccEndpoints } from "../types";
import { SapccApi } from "../custom-sapcc-openapi";

export const mySapccExtension: ApiClientExtension = {
  name: "customsapcc",
  isNamespaced: true,
  extendApiMethods(context) {
    return {
      ...createProxyApi(SapccApi, context.client),
    }
  },
};

  export * from "./unified";
  export * from "./cdn";
+ export * from "./custom-sapcc"

  import axios from "axios";

  const myClient = axios.create(/* add options, interceptors here */);

  // ...
   extendApiMethods(context) {
     return {
+      ...createProxyApi(SapccApi, myClient),
     }
   },

- import { cdnExtension, unifiedApiExtension } from './extensions'; 
+ import { mySapccExtension, cdnExtension, unifiedApiExtension } from "./extensions"
  export const config = {
    location: '@vsf-enterprise/sapcc-api/server',
  
    configuration: {
      OAuth: {
        uri: SAPCC_OAUTH_URI,
        clientId: SAPCC_OAUTH_CLIENT_ID,
        clientSecret: SAPCC_OAUTH_CLIENT_SECRET,
        tokenEndpoint: SAPCC_OAUTH_TOKEN_ENDPOINT,
        tokenRevokeEndpoint: SAPCC_OAUTH_TOKEN_REVOKE_ENDPOINT,
  
        cookieOptions: {
          'vsf-sap-token': {
            secure: NODE_ENV !== 'development'
          }
        }
      },
  
      api: {
        uri: SAPCC_API_URI,
        baseSiteId: 'apparel-uk',
        catalogId: 'apparelProductCatalog',
        catalogVersion: 'Online',
        defaultLanguage: 'en',
        defaultCurrency: 'USD'
      }
    },
  
    extensions: (extensions: ApiClientExtension[]) => [
      ...extensions,
      unifiedApiExtension,
      cdnExtension,
      ...(IS_MULTISTORE_ENABLED === 'true' ? [multistoreExtensionFactory()] : []),
      checkoutExtensionFactory(),
+     mySapccExtension
    ]
  } satisfies Integration<Config>;

  import type {
    CommerceEndpoints,
    UnifiedCmsEndpoints,
    UnifiedEndpoints,
    CheckoutEndpoints,
+   CustomSapccEndpoints
  } from 'storefront-middleware/types';
  import { initSDK, middlewareModule } from "@vue-storefront/sdk";
  
  export const sdk = initSDK({
    commerce: buildModule(middlewareModule<CommerceEndpoints>, {
      apiUrl: `${config.middlewareUrl}/commerce`,
      cdnCacheBustingId: config.cdnCacheBustingId,
      defaultRequestConfig: {
        headers: getRequestHeaders(),
      },
+   }),
+   customsapcc: buildModule(middlewareModule<CustomSapccEndpoints>, {
+     apiUrl: `${config.middlewareUrl}/commerce/customsapcc`, // "customsapcc" suffix because mySapccExtension has `isNamespaced: true` and has `name: 'mysapcc'`
+   }),
+ });

useSdk().customsapcc.someMethod()

export const createProxyApi = <T extends object>(
  OpenApiClass: {
    new (...params: ConstructorParameters<typeof SapccApi>): T;
  },
  axiosInstance?: AxiosInstance
) => {
  /*
   * For more info about JavaScript Proxies, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy
   *
   * This Proxy is meant to be a "behaves-like-an-object" adapter for the *CLASS* `new SapccApi()`
   * `apiClientFactory` at the bottom of this file wasn't made to accept classes in the `{ api: }` param (`{ api: new SapccApi() }`)
   * So we need to wrap the SapccApi class with an object, which this proxy does.
   *
   */
  return new Proxy(new OpenApiClass(undefined, undefined, axiosInstance), {
    /*
     * This method describes what happens when a function tries to list the keys of our proxy object. e.g. `Object.keys(proxy)`
     * In the case of this implementation, it will list all the methods of the `SapccApi` class instance. e.g. `Object.keys(proxy) // ['createCart', 'getProduct', ...]
     * @example `Object.keys(proxy) // lists all methods in `new SapccApi()`
     *
     * `ownKeys` is required because otherwise `Object.entries` call in the below link in the middleware package always returns an empty array (see @example below)
     * @see {@link https://github.com/vuestorefront/vue-storefront/blob/main/packages/middleware/src/apiClientFactory/applyContextToApi.ts#L33}
     * @example `Object.entries(new SapccApi()) // returns []
     * This is because Object.keys only lists *own* *properties* of an *object*, but we passed a *class* which doesn't have *own* properties - it has only *inherited* properties in __proto__.
     */
    ownKeys(target) {
      /*
       * "Damn why didn't he use `Object.keys` to list class methods? Would be easier?"
       * Object.keys(new SapccApi())                            -> [], wrong
       * Object.getOwnPropertyNames(new SapccApi())             -> [], wrong
       * Object.keys((new SapccApi()).__proto__)                -> [], wrong
       * Object.getOwnPropertyNames((new SapccApi()).__proto__) -> actually gets class methods
       */
      return Object.getOwnPropertyNames(
        // @ts-expect-error Hidden property
        // eslint-disable-next-line no-proto
        target.__proto__
      );
    },
    // https://stackoverflow.com/questions/65339985/why-isnt-ownkeys-proxy-trap-working-with-object-keys
    getOwnPropertyDescriptor(_target, property) {
      return {
        // we do not want to iterate over the constructor
        enumerable: property !== "constructor",
        configurable: true,
      };
    },
    /*
     * This is the function that defines what happens
     * when the expression `proxy['prop']` is evaluated.
     *
     * Normally we'd do just write `return (new SapccApi())[prop]`
     *
     * All the quirks are described in the comments in the implementation below.
     *
     * @see {@link https://github.com/vuestorefront/vue-storefront/blob/main/packages/middleware/src/apiClientFactory/applyContextToApi.ts#L40}
     */
    get(openApiClientInstance, methodName: string) {
      if (methodName === "then") {
        return Promise.resolve(openApiClientInstance[methodName]);
      }

      if (!(methodName in openApiClientInstance)) {
        throw new Error(
          `The API client tried to find a method named ${`methodName`} but no such method exists within the integration`
        );
      }

      /*
       * Normally we'd just `return target[prop]`,
       * but we need to wrap that in a function that reorders the arguments.
       * `@vue-storefront/middleware` expects to receive methods in the format:
       * `someApiMethod(middlewareContext, methodProps)`
       * (see {@link https://github.com/vuestorefront/vue-storefront/blob/main/packages/middleware/src/apiClientFactory/applyContextToApi.ts#L40}):
       * but all of `new SapccApi` methods expect the format:
       * `someApiMethod(methodProps, options?)`
       * So in real life like:
       * `createCart({ baseSiteId: 'apparel-uk'}, { headers: {...}})`
       *
       * This also gives you access to the context, so you can grab the `apiUrl` from the middleware configuration and pass it to the method. By default it just queries our SAP CC instance.
       */
      return async (
        context: Context["$sapcc"],
        // most of the time this is actually just [object], not object[] so you can do args[0]
        ...args: object[]
      ) => {
        /* Calling e.g. proxy.createCart() without the .bind will result in `this.configuration is undefined` errors
         * this meant that the function's lexical context "forgot" to which class it belongs,
         * so we use .bind() to reconnect it to the SapccApi class instance.
         */
        const apiFunction = openApiClientInstance[methodName].bind(
          openApiClientInstance
        ) as GenericOpenapiMethod;

        const { logger } = context.config;

        /*
         * The regular props that the method accepts in query or body (baseSiteId, userId, and others, depending on what the method is, like creatCart has different args etc)
         * Always append baseSiteId from the config - we don't let the user provide it on a per-method basis
         * The BaseProps type is included in the union because of Alokai SDK Methods
         */
        const props: Record<string, unknown> & BaseProps = {
          baseSiteId: context.config.api.baseSiteId, // this is required for SapccAPI
          baseSite: context.config.api.baseSiteId, // this is required for SapccAsmAPI
          userId: getUserIdFromRequest({ req: context.req, props: args[0] }),
          fields: "FULL",
          ...args[0],
        };

        const axiosRequestOptions = createRequestOptionsWithJsonHeader({
          context,
          props,
          tokenMode: getTokenModeByMethodName(methodName),
        });

        try {
          const response = await apiFunction(props, axiosRequestOptions);
          /**
           * We have to remove the request object because of the circular reference error.:
           * Starting Object: The circular structure starts with an object constructed using the ClientRequest constructor.
           * Circular Path:
           * This ClientRequest object has a property named socket which is an instance of TLSSocket.
           * The TLSSocket instance has a property _httpMessage that references back to the ClientRequest object.
           * Cycle: This creates a circular reference where ClientRequest references TLSSocket, which in turn references back to ClientRequest.
           */
          response.request = null;

          return response;
        } catch (error) {
          if (logger) {
            logger.error(`api/${methodName}`, error.message);
          }

          throw error;
        }
      };
    },
  });
};