Local-First

// models/cart.ts
import { defineModel } from "@firsttx/local-first";
import { z } from "zod";

export const CartModel = defineModel("cart", {
  schema: z.object({
    items: z.array(
      z.object({
        id: z.string(),
        name: z.string(),
        qty: z.number(),
      }),
    ),
  }),

  // 선택: 기본값은 5분 (5 * 60 * 1000 ms)
  ttl: 5 * 60 * 1000,

  // 선택: 데이터 구조가 깨지면 version을 올려 초기화
  version: "1",

  // version을 쓰는 경우 권장: 초기 디스크 값
  initialData: {
    items: [],
  },
});

import { useModel } from "@firsttx/local-first";
import { CartModel } from "./models/cart";

export function CartSidebar() {
  const { data: cart, patch, history, error, status } = useModel(CartModel);

  if (status === "loading") {
    return <div className="text-xs text-muted-foreground">로딩 중...</div>;
  }

  if (status === "error") {
    return (
      <div className="text-xs text-destructive">
        카트 로드 실패: {error?.getUserMessage?.() ?? String(error)}
      </div>
    );
  }

  if (!cart) {
    return <div className="text-xs text-muted-foreground">카트가 비어있습니다.</div>;
  }

  return (
    <ul className="space-y-1 text-sm">
      {cart.items.map((item) => (
        <li key={item.id} className="flex items-center justify-between">
          <span>{item.name}</span>
          <span className="text-muted-foreground">x {item.qty}</span>
        </li>
      ))}

      {history && (
        <p className="mt-2 text-[11px] text-muted-foreground">
          Last updated {Math.round(history.age / 1000)}s ago
          {history.isStale && " · stale"}
        </p>
      )}
    </ul>
  );
}

import { useSyncedModel } from "@firsttx/local-first";
import { CartModel } from "./models/cart";

async function fetchCart(current: unknown) {
  // current에는 현재 캐시된 값(또는 null)이 들어옵니다.
  const res = await fetch("/api/cart");
  if (!res.ok) throw new Error("Failed to fetch cart");
  return res.json();
}

export function CartPage() {
  const {
    data: cart,
    isSyncing,
    error,
    history,
    patch,
    sync,
  } = useSyncedModel(CartModel, fetchCart, {
    syncOnMount: "stale", // "always" | "stale" | "never"
  });

  if (error) {
    return (
      <div className="text-sm text-destructive">
        Failed to sync: {error.getUserMessage?.() ?? error.message}
      </div>
    );
  }

  if (!cart) {
    return <div>Loading cart…</div>;
  }

  return (
    <div className="space-y-4">
      {cart.items.map((item) => (
        <div key={item.id} className="flex items-center justify-between">
          <span>{item.name}</span>
          <span className="text-sm text-muted-foreground">x {item.qty}</span>
        </div>
      ))}

      <div className="flex items-center gap-3 text-xs text-muted-foreground">
        {isSyncing && <span>Syncing latest data…</span>}
        {history && (
          <span>
            Last updated {Math.round(history.age / 1000)}s ago
            {history.isStale && " (stale)"}
          </span>
        )}
        <button
          type="button"
          onClick={() => sync("manual")}
          className="rounded-full border border-border px-2 py-0.5 text-[11px]"
        >
          Refresh
        </button>
      </div>
    </div>
  );
}

import { Suspense } from "react";
import { useSuspenseSyncedModel } from "@firsttx/local-first";
import { CartModel } from "./models/cart";

async function fetchCart() {
  const res = await fetch("/api/cart");
  if (!res.ok) throw new Error("Failed to fetch cart");
  return res.json();
}

function CartInner() {
  const { data: cart } = useSuspenseSyncedModel(CartModel, fetchCart);

  return (
    <ul className="space-y-2 text-sm">
      {cart.items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

export function SuspenseCart() {
  return (
    <Suspense fallback={<div>Loading cart…</div>}>
      <CartInner />
    </Suspense>
  );
}

function CartInnerLowLevel() {
  CartModel.getSyncPromise(fetchCart); // 데이터가 없으면 이 Promise가 throw되며 Suspense fallback으로 이동

  const { data: cart } = useModel(CartModel);
  if (!cart) return null;

  return (
    <ul className="space-y-2 text-sm">
      {cart.items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}