Quick Start

Spin up a minimal project and see live queries and optimistic updates in action.

🎯 Try This Example Live

Use the live playground immediately, or open its CodeSandbox workspace to inspect and change the source.

Open Live Playground →|View and Edit Code →

Quick Navigation

• Quick Setup
• What's Next?

Quick setup (Memory plugin)

import { DataStore } from "@routier/datastore";
import { MemoryPlugin } from "@routier/memory-plugin";
import { InferType, s } from "@routier/core/schema";

// Define a schema
const userSchema = s
  .define("users", {
    id: s.string().key().identity(),
    name: s.string(),
    email: s.string().distinct(),
  })
  .compile();

// Create a context (datastore) using the plugin
class AppContext extends DataStore {
  constructor() {
    super(new MemoryPlugin("routier-app"));
  }
  users = this.collection(userSchema).proxy().create();
}

const ctx = new AppContext();
await ctx.users.addAsync({ name: "James", email: "[email protected]" });
await ctx.saveChangesAsync();

// Select it back. Types flow from the schema, so `found.email` is checked with no annotation.
const found = await ctx.users.firstOrUndefinedAsync(
  ([u, p]) => u.name === p.name,
  { name: "James" }
);

console.log(found?.email); // [email protected]

// You rarely need to name the entity type — but when you do (a function parameter, a React
// prop, an API payload), read it off the schema with InferType rather than hand-writing an
// interface that can drift from it.
type User = InferType<typeof userSchema>;

const greet = (person: User) => `${person.name} <${person.email}>`;

const user: User | undefined = found;

if (user != null) {
  console.log(greet(user)); // James <[email protected]>
}

Note the last few lines. Query results are already typed from the schema, so you rarely annotate anything. When you do want to name the entity type — a function parameter, a React prop, an API payload — get it from the schema with InferType<typeof userSchema> rather than writing an interface by hand, which then has to be kept in step with the schema. See InferType.

What's Next?

• Learn About Schemas - Define your data structure
• Explore Queries - Query and filter data
• Try Live Queries - Build reactive UIs
• Use with React - React integration