CMSAdapter

This is an abstract class that all custom CMS adapters must inherit from. The default is the CommerceCMSAdapter. It defines the contract for how the CMSClient communicates with the backend.

Methods to Implement

getPage

This method should be implemented to return page data from your CMS.

• Signature: getPage<T extends DefaultCMSPage>(options?: CMSPageRequestOptions): Promise<T>;

getPreviewContext

This method should be implemented to return preview context data (like redirect URLs).

• Signature: getPreviewContext(options: CMSPreviewRequestOptions): Promise<PreviewContext>;

Provided Methods

getPreviewWrapperComponent

Returns a React component that wraps your application to initialize live preview functionality for the specific CMS (e.g., Contentful Live Preview, SmartEdit).

• Usage:

  const cmsClient = useCMSClient();
  const PreviewWrapper = cmsClient.getPreviewWrapperComponent();
  
  return (
      <PreviewWrapper>
          <PageTemplate />
      </PreviewWrapper>
  );

---

Deep Dive

Description: The CMSAdapter is the bridge between the generic CMSClient and your specific backend implementation. It's where you encapsulate the logic for making API calls to your Archibald server endpoints.

• How To: Create a concrete class that extends CMSAdapter and implement the getPage method. This method will typically use the api instance (provided by the CMSClient) to make an HTTP request.

  // Correct: Implementing a custom adapter
  import { CMSAdapter, Page } from '@archibald/cms';
  
  export class CustomCMSAdapter extends CMSAdapter {
      public async getPage(options: { path: string }): Promise<Page> {
          const response = await this.api.get('/cms/page', { params: options });
          return response.data;
      }
  }

• Best Practice: The adapter's responsibility is to communicate with your Archibald backend, not the end CMS. The server-side CMSProvider is what communicates with the CMS. This separation ensures that no CMS-specific SDKs or logic leak into your client-side bundle, keeping it lean and secure.

  // Avoid: Calling a third-party CMS directly from the adapter.
  import { CMSAdapter } from '@archibald/cms';
  import { someThirdPartyCmsSDK } from 'some-cms-sdk'; // Don't do this!
  
  export class CustomCMSAdapter extends CMSAdapter {
      public async getPage(options: { path: string }): Promise<Page> {
          // This logic belongs in a CMSProvider on the server.
          const rawData = await someThirdPartyCmsSDK.fetchPage(options.path);
          return this.transform(rawData); // Transformation also belongs on the server.
      }
  }