Integrate Frontend

Type-safe client SDK — createClient(), auth/session, and full-stack type inference.

QUESTPIE provides a typed client SDK that connects to your backend with full type safety. Collection names, field types, query operators, and route signatures are all inferred from your schema.

Create Client

lib/client.ts

import { createClient } from "questpie/client";
import type { AppConfig } from "#questpie";

export const client = createClient<AppConfig>({
	baseURL:
		typeof window !== "undefined"
			? window.location.origin
			: process.env.APP_URL || "http://localhost:3000",
	basePath: "/api",
});

Option	Type	Description
`baseURL`	`string`	Server URL
`basePath`	`string`	API path prefix (e.g., `"/api"`)

Collections API

// Find many
const { docs, totalDocs } = await client.collections.posts.find({
	where: { status: "published" },
	orderBy: { createdAt: "desc" },
	limit: 10,
});

// Find one
const post = await client.collections.posts.findOne({
	where: { slug: "hello-world" },
	with: { author: true },
});

// Create
const newPost = await client.collections.posts.create({
	title: "Hello",
	body: "World",
	status: "draft",
});

// Update
const updated = await client.collections.posts.update({
	id: "abc",
	data: { status: "published" },
});

// Delete
await client.collections.posts.delete({ id: "abc" });

// Count
const count = await client.collections.posts.count({
	where: { status: "draft" },
});

Globals API

// Read
const settings = await client.globals.siteSettings.get();

// Update
await client.globals.siteSettings.update({
	shopName: "New Name",
});

Typed JSON Routes

// Call a JSON route
const result = await client.routes.createBooking({
	barberId: "abc",
	serviceId: "def",
	scheduledAt: "2025-03-15T10:00:00Z",
	customerName: "John",
	customerEmail: "john@example.com",
});

Routes

Call custom HTTP routes defined in routes/:

// Call a route — returns raw Response
const response = await client.routes["webhooks/stripe"]({
	method: "POST",
	body: JSON.stringify(payload),
	headers: { "stripe-signature": sig },
});

// Get the URL for a route (useful for forms, links)
const healthUrl = client.routes["health"].url;

Unlike collections and JSON routes, raw routes return Response objects - you handle parsing yourself.

Locale

// Set locale for localized content
client.setLocale("sk");

const services = await client.collections.services.find({
	where: { isActive: true },
});
// Returns Slovak translations for localized fields

Sections

TanStack Query — React hooks for data fetching
Querying — Where, orderBy, with, select, pagination
Realtime — Live data subscriptions
Type Inference — End-to-end type safety
Adapters — HTTP framework adapters