Data Fetching

Manic provides a flexible environment for data fetching. Because it is a fullstack framework, you can fetch data directly from your API routes or connect to external services.

Client-Side Fetching

The most common pattern in Manic is fetching data on the client using standard React hooks or libraries like react-query and swr.

import React, { useState, useEffect } from 'react';

export default function UserList() {
  const [users, setUsers] = useState<string[]>([]);

  useEffect(() => {
    fetch('/api/users')
      .then(res => res.json())
      .then(data => setUsers((data as { users: string[] }).users));
  }, []);

  return (
    <ul>
      {users.map(user => <li key={user}>{user}</li>)}
    </ul>
  );
}

Environment Variables

To keep your application secure, Manic distinguishes between Server-Only and Client-Accessible environment variables.

Public Variables

Any variable prefixed with MANIC_PUBLIC_ will be automatically injected into your client-side bundle by the OXC transformer.

DATABASE_URL="postgres://..." # Server-only
MANIC_PUBLIC_API_URL="https://api.example.com" # Client-accessible

Accessing Variables

Use the getEnv helper from manicjs/env:

import { getEnv } from 'manicjs/env';

const apiUrl = getEnv('MANIC_PUBLIC_API_URL');

Server-Side Fetching

Inside an API route you have full server access — process.env, Bun.file, third-party SDKs, your database driver, etc. Environment variables from .env and .env.local are loaded automatically when the server starts:

import { Hono } from 'hono';

const app = new Hono();

app.get('/', async () => {
  const dbUrl = process.env.DATABASE_URL!;
  const posts = await fetch(`${dbUrl}/posts`).then(r => r.json());
  return Response.json({ posts });
});

export default app;

If you need to read environment values outside the request lifecycle (e.g. in a script), read from process.env after your runtime has loaded .env files:

const apiKey = process.env.STRIPE_SECRET_KEY;

Type-Safe API Calls

Use Hono's client for type-safe API calls from the browser:

type AppType = {
  users: {
    $get: () => Promise<{ json: () => Promise<{ users: string[] }> }>;
  };
};

declare function hc<T>(baseUrl: string): T;

const client = hc<AppType>('/api');
const res = await client.users.$get();
const data = await res.json();

See Also

• API Routes - Backend endpoints
• Environment Variables - Config variables
• Configuration - Server settings