useCMSClient

This hook returns the current CMSClient instance that has been provided to the application via CMSClientProvider.

Usage

import { useCMSClient } from '@archibald/cms';

const cmsClient = useCMSClient();

---

Deep Dive

Description: useCMSClient is a simple but crucial hook that acts as the entry point for any direct interaction with the CMSClient instance from within a React component.

• How To: Use this hook whenever you need to call a method on the CMSClient directly, such as getPreviewWrapperComponent.

  // Correct: Accessing the client to get the preview wrapper.
  import { useCMSClient } from '@archibald/cms';
  
  function PageLayout({ children }) {
      const cmsClient = useCMSClient();
      const PreviewWrapper = cmsClient.getPreviewWrapperComponent();
  
      return <PreviewWrapper>{children}</PreviewWrapper>;
  }

• Best Practice: For fetching data, prefer using the more specific data hooks like usePage instead of calling cmsClient.getPage() directly. The data hooks are integrated with useFetch and provide caching, state management (isLoading, isError), and other features out of the box. Use useCMSClient for actions, not for fetching state that components depend on for rendering.

  // Avoid: Using the client directly for data fetching in components.
  import { useCMSClient } from '@archibald/cms';
  import { useState, useEffect } from 'react';
  
  function MyPage() {
      const cmsClient = useCMSClient();
      const [pageData, setPageData] = useState(null);
  
      useEffect(() => {
          // This bypasses `useFetch`'s caching and state management.
          cmsClient.getPage({ pageLabelOrId: 'homepage' }).then(setPageData);
      }, [cmsClient]);
  
      // ...
  }

  // Correct: Use the dedicated hook for data fetching.
  import { usePage } from '@archibald/cms';
  
  function MyPage() {
      const { data, isLoading } = usePage({ pageLabelOrId: 'homepage' });
      // ...
  }