Typed frontend

npm run xano:routes   # xanosdk routes ./xano/index.ts --emit xano/routes.gen.ts

// frontend/src/lib/api.ts
import type { InferResponse } from "@xano/sdk";
import type { createPost, getPost } from "../../../xano/api/blog.js";
import { ROUTES, routePath, type RouteInputs } from "../../../xano/routes.gen.js";

declare global {
  interface Window {
    XANO_HOST?: string;
  }
}

// The backend URL: injected by a deploy as window.XANO_HOST, else VITE_XANO_HOST in dev.
export const XANO_HOST: string =
  (typeof window !== "undefined" && window.XANO_HOST) ||
  import.meta.env.VITE_XANO_HOST ||
  "";

export type NewPost = RouteInputs["POST posts"];
export type Post = InferResponse<typeof createPost>;
export type MaybePost = InferResponse<typeof getPost>;

export async function fetchPost(id: number): Promise<MaybePost> {
  const res = await fetch(XANO_HOST + routePath("GET posts/{id}", { id }), {
    method: ROUTES["GET posts/{id}"].verb,
  });
  if (!res.ok) throw new Error(await res.text());
  return res.json();
}

export async function createPostRequest(body: NewPost, token: string): Promise<Post> {
  const res = await fetch(XANO_HOST + routePath("POST posts"), {
    method: ROUTES["POST posts"].verb,
    headers: { "content-type": "application/json", authorization: `Bearer ${token}` },
    body: JSON.stringify(body),
  });
  if (!res.ok) throw new Error(await res.text());
  return res.json();
}

npx xanosdk marketplace install zod

import { ROUTE_SCHEMAS } from "../../../xano/routes.gen.js";

const body = ROUTE_SCHEMAS["POST posts"].parse(untrustedInput);

import { socketUrl, channelPath, type MessageInputs } from "../../../xano/routes.gen.js";

const ws = new WebSocket(socketUrl("chat", XANO_HOST), token); // the token is the subprotocol
const channel = channelPath("rooms/{room_id}", { room_id: 42 });
const payload: MessageInputs["rooms/{room_id} send"] = { body: "hi" };

// The server finishes its handshake first, so wait briefly before the first frame.
ws.onopen = () =>
  setTimeout(() => {
    ws.send(JSON.stringify({ action: "join", channel }));
    ws.send(JSON.stringify({ action: "broadcast", channel, type: "send", payload }));
  }, 500);