Kolaybase + Remix: PostgreSQL Backend with Loaders and Actions

Install

npm install kolaybase-js

Create a server client

// app/kolaybase.server.ts
import { createClient } from "kolaybase-js";

export const kb = createClient({
  projectId: process.env.KOLAYBASE_PROJECT_ID!,
  apiKey: process.env.KOLAYBASE_ANON_KEY!,
});

Keep the client in a .server file so keys never reach the browser. Use a service key only for trusted operations.

Load data in a route

// app/routes/posts.tsx
import { kb } from "~/kolaybase.server";
import { useLoaderData } from "@remix-run/react";

export async function loader() {
  const { data } = await kb.from("posts").select("id, title");
  return { posts: data ?? [] };
}

export default function Posts() {
  const { posts } = useLoaderData<typeof loader>();
  return <ul>{posts.map((p) => <li key={p.id}>{p.title}</li>)}</ul>;
}

Frequently asked questions

Where should the Kolaybase client live in Remix?

In a .server file so it's never bundled to the browser. Loaders and actions import it for data access.

How do I handle auth in Remix?

Authenticate with kb.auth and persist the session in a Remix cookie session, validating it in loaders and actions.

Other integrations