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.