Usar com SvelteKit
Como consumir conteúdo do Acachy CMS em rotas server-side do SvelteKit.
Use o Acachy CMS no SvelteKit sempre pelo servidor para manter a API key privada.
Variáveis de Ambiente
No app SvelteKit, crie .env:
ACACHY_API_URL="https://api.example.com"
ACACHY_API_KEY="<content-read-api-key>"A chave deve ser criada no painel admin em API Keys com o escopo content:read.
Client Server-side
Crie um módulo server-only:
// src/lib/server/acachy.ts
import { ACACHY_API_KEY, ACACHY_API_URL } from '$env/static/private'
import { createAcachyClient } from '@repo/client'
export const acachy = createAcachyClient({
baseUrl: ACACHY_API_URL,
apiKey: ACACHY_API_KEY,
})Não use variáveis PUBLIC_ para a API key.
Listar Posts
// src/routes/blog/+page.server.ts
import { acachy } from '$lib/server/acachy'
type Post = {
name: string
description: string
image?: string
category: string
publishedAt: string
}
export async function load() {
const posts = await acachy.findMany<Post>('posts', {
limit: 20,
sort: 'publishedAt',
order: 'desc',
fields: 'name,description,image,category,publishedAt,slug',
})
return { posts: posts.data }
}<!-- src/routes/blog/+page.svelte -->
<script lang="ts">
export let data: {
posts: Array<{
id: string
slug: string | null
name: string
description: string
image?: string
category: string
}>
}
</script>
<section>
{#each data.posts as post}
<article>
{#if post.image}
<img src={post.image} alt={post.name} />
{/if}
<p>{post.category}</p>
<h2>{post.name}</h2>
<p>{post.description}</p>
<a href={`/blog/${post.slug}`}>Ler mais</a>
</article>
{/each}
</section>Página por Slug
// src/routes/blog/[slug]/+page.server.ts
import { error } from '@sveltejs/kit'
import { acachy } from '$lib/server/acachy'
type Post = {
name: string
description: string
body: string
image?: string
category: string
publishedAt: string
}
export async function load({ params }) {
try {
const post = await acachy.findBySlug<Post>(
'posts',
params.slug,
'name,description,body,image,category,publishedAt,slug',
)
return { post }
} catch {
throw error(404, 'Post não encontrado')
}
}Ordenação Manual do CMS
Quando uma lista for reordenada no admin, use sort_order:
const experiences = await acachy.findMany('experiences', {
limit: 100,
sort: 'sort_order',
order: 'asc',
})Fetch Sem Client
import { ACACHY_API_KEY, ACACHY_API_URL } from '$env/static/private'
export async function load() {
const response = await fetch(`${ACACHY_API_URL}/api/v1/content/posts?limit=10`, {
headers: { 'x-api-key': ACACHY_API_KEY },
})
if (!response.ok) throw new Error('Falha ao carregar conteúdo')
return await response.json()
}Recomendações
- Busque dados no
+page.server.ts,+layout.server.tsou endpoints server-side. - Use
fieldspara reduzir o payload. - A API pública retorna apenas entries
published. - A API key precisa ter o escopo
content:read.