ACACHY

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.ts ou endpoints server-side.
  • Use fields para reduzir o payload.
  • A API pública retorna apenas entries published.
  • A API key precisa ter o escopo content:read.

On this page