TanStack DB, the reactive client-first store for your API.

In this article, we review TanStack DB and how useLiveQuery is imlemented in claude-code-ui. We will look at:

1. What is TanStack DB?

2. useLiveQuery in claude-code-ui.

What is TanStack DB?

TanStack DB gives you a reactive, client-first store for your API data with collections, live queries and optimistic mutations that keep your UI reactive, consistent and blazing fast 🔥

At the time of writing this article, TanStack DB has 3.5k stars on GitHub.

How it works?

TanStack DB works by:

• defining collections typed sets of objects that can be populated with data

• using live queries to query data from/across collections

• making optimistic mutations using transactional mutators

// Define collections to load data into
const todoCollection = createCollection({
  // ...your config
  onUpdate: updateMutationFn,
})
 
const Todos = () => {
  // Bind data using live queries
  const { data: todos } = useLiveQuery((q) =>
    q.from({ todo: todoCollection }).where(({ todo }) => todo.completed)
  )
 
  const complete = (todo) => {
    // Instantly applies optimistic state
    todoCollection.update(todo.id, (draft) => {
      draft.completed = true
    })
  }
 
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id} onClick={() => complete(todo)}>
          {todo.text}
        </li>
      ))}
    </ul>
  )
}

Learn more about TanStack DB in the Getting Started guide.

useLiveQuery in claude-code-ui.

I came across the term useLiveQuery in claude-code-ui’s CLAUDE.md.

So where do I find this useLiveQuery? I first thought it would be in the data folder, but useLiveQuery is called in useSessions.ts file.

/**
 * Hook to get all sessions from the StreamDB.
 * Returns reactive data that updates when sessions change.
 *
 * NOTE: This must only be called after the root loader has run,
 * which initializes the db via getSessionsDb().
 */
export function useSessions() {
  const db = getSessionsDbSync();
 
  const query = useLiveQuery(
    (q) =>
      q
        .from({ sessions: db.collections.sessions })
        .orderBy(({ sessions }) => sessions.lastActivityAt, "desc"),
    [db]
  );
 
  // Transform to array of sessions
  // The query.data is a Map where values are the session objects directly
  const sessions: Session[] = query?.data
    ? Array.from(query.data.values())
    : [];
 
  return {
    sessions,
    isLoading: query?.isLoading ?? false,
  };
}

The comment above ths hook explains what it does.

About me:

Hey, my name is Ramu Narasinga. I study codebase architecture in large open-source projects.

Email: ramu.narasinga@gmail.com

I spent 200+ hours analyzing Supabase, shadcn/ui, LobeChat. Found the patterns that separate AI slop from production code. Stop refactoring AI slop. Start with proven patterns. Check out production-grade projects at thinkthroo.com

References:

1. KyleAMathews/claude-code-ui/packages/ui/CLAUDE.md

2. https://tanstack.com/db/latest

3. https://github.com/tanstack/db

4. https://tanstack.com/db/latest/docs/overview

5. KyleAMathews/claude-code-ui/packages/ui/src/hooks/useSessions.ts