index.tsx

import { createAsync, query } from "@solidjs/router";
import { env } from "cloudflare:workers";
import { sql } from "drizzle-orm";
import { Suspense } from "solid-js";
import { getRequestEvent } from "solid-js/web";

import { visitor } from "~/db/schema";
import { randomName } from "~/lib/random";

const getData = query(async () => {
  "use server";

  const event = getRequestEvent();
  if (!event) throw Error("Missing event");

  const user = event.locals.user;
  const metadata = env.CF_VERSION_METADATA;
  const environment = env.ENVIRONMENT;

  const kvKey = "test";
  await env.KV.put(kvKey, "value");
  const kv = await env.KV.get(kvKey);

  const r2Key = "test";
  await env.R2.put(r2Key, "Hello, World!");
  const r2 = await env.R2.get(r2Key);

  const db = event.locals.db;
  const batch = await db.batch([
    db.insert(visitor).values({ name: randomName() }),
    db.run(sql`DELETE FROM visitor ORDER BY id DESC LIMIT -1 OFFSET 5`),
    db.query.visitor.findMany()
  ]);

  const visitors = batch[2];

  const cache = await event.locals.caches.default.match("https://example.com");

  return {
    user,
    metadata,
    environment,
    kv,
    r2: {
      key: r2?.key,
      size: r2?.size,
      etag: r2?.etag
    },
    visitors,
    cache
  };
}, "data");

export const route = {
  preload: () => getData()
};

export default function Home() {
  const data = createAsync(() => getData());

  return (
    <main class="flex flex-1 flex-col items-center gap-2 px-2 py-4">
      <h1 class="text-2xl">Hello</h1>
      <Suspense fallback="Loading...">
        <pre class="text-sm">{JSON.stringify(data(), null, 2)}</pre>
      </Suspense>
    </main>
  );
}