ACACHY

Usar com React/Vite

Como consumir conteúdo do Acachy CMS em um frontend React no navegador.

Em SPAs, a API key fica visível no navegador. Use uma chave apenas de leitura com content:read.

Variáveis

VITE_ACACHY_API_URL="https://api.example.com"
VITE_ACACHY_API_KEY="<content-read-api-key>"

Criar Client

import { createAcachyClient } from '@repo/client'

export const acachy = createAcachyClient({
  baseUrl: import.meta.env.VITE_ACACHY_API_URL,
  apiKey: import.meta.env.VITE_ACACHY_API_KEY,
})

Componente de Lista

import { useEffect, useState } from 'react'
import { acachy } from './acachy'

type Post = {
  id: string
  slug: string | null
  title?: unknown
  excerpt?: unknown
}

export function PostsList() {
  const [posts, setPosts] = useState<Post[]>([])
  const [error, setError] = useState('')

  useEffect(() => {
    let active = true

    acachy
      .findMany('posts', { limit: 6, fields: 'title,slug,excerpt' })
      .then((response) => {
        if (active) setPosts(response.data as Post[])
      })
      .catch((err) => {
        if (active) setError(err instanceof Error ? err.message : 'Erro ao carregar')
      })

    return () => {
      active = false
    }
  }, [])

  if (error) return <p>{error}</p>

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{String(post.title)}</li>
      ))}
    </ul>
  )
}

Fetch Sem Client

const response = await fetch(`${import.meta.env.VITE_ACACHY_API_URL}/api/v1/content/posts`, {
  headers: {
    'x-api-key': import.meta.env.VITE_ACACHY_API_KEY,
  },
})

const data = await response.json()

Recomendação

Para sites públicos, prefira buscar campos específicos com fields para reduzir payload.

On this page