useCmsData

Descrição: O hook useCmsData é uma implementação para o React que permite obter dados dos componentes aplicados no CMS por meio da API do CMS. Ele é uma customização do M3Cms para facilitar o uso e gerenciamento dos dados do CMS em um componente React.

Exemplo de utilização do hook useCmsData:

import { useEffect } from "react";
import { useCmsData } from "../hooks/useCmsData";
import { M3CmsConfig } from "../services/M3Cms";

const cmsConfig: M3CmsConfig = {
  locale: 'pt-BR',
  projectName: 'StoreXPTO',
  workspaceName: 'master',
  baseUrl: 'http://backend/api/v1',
};

function MyCustomImplementation() {
  const { data, loading, error } = useCmsData(['HomePage', 'FeaturedProducts'], cmsConfig);

  if (error) {
    return <p>Erro ao obter os dados do CMS: {error.message}</p>;
  }

  if (loading) {
    return <p>Loading...</p>;
  }

  if (data) {
    // Renderiza os componentes usando os dados do CMS
    return (
      <div>
        <h1>{data.HomePage.title}</h1>
        <p>{data.FeaturedProducts.content}</p>
      </div>
    );
  }

  return null;
}

export default HomePage;

Neste exemplo, o componente MyCustomImplementation utiliza o hook useCmsData para obter os dados dos componentes com as tags HomePage e FeaturedProducts. Os dados são buscados na API do CMS configurada no cmsConfig.

O hook useCmsData gerencia o estado do carregamento (loading), os dados obtidos do CMS (data), e possíveis erros (error). Ele também utiliza um cache para evitar buscas repetidas dos mesmos dados, melhorando o desempenho da aplicação.

Esse hook é uma customização da classe M3Cms, que foi documentada anteriormente. Para mais detalhes sobre a implementação do hook e como ele utiliza a classe M3Cms, consulte a documentação da classe M3Cms.

Atenção

O hook e' legal, porem nao recomendamos o uso dele num nível de pagina. Pois a cada mudança de estado pode provocar rerender dos componente e consequentemente piorar a performance da pagina.

No nível de pagina recomendamos o uso da classe M3Cms com alguma técnica de busca do lado do servidor ou propriedades estáticas. No NextJs, por exemplo, getStaticProps ou getServerSideProps são boas opções para buscar os dados do CMS no lado do servidor e passar como props para o componente.