This provides a local-first in browser example project that uses Aphrodite.
See also -- Aphrodite in an interactive reactive notebook (observablehq).

Launch the app!

The schema that defines the data model is here (reproduced below)

engine: sqlite
db: todomvc

Todo as Node {
  id: ID<Todo>
  listId: ID<TodoList>
  text: NaturalLanguage
  created: Timestamp
  modified: Timestamp
  completed: Timestamp | null
} 

TodoList as Node {
  id: ID<TodoList>
  filter: Enumeration<all | active | completed>
  editing: ID<Todo> | null
} & OutboundEdges {
  todos: Edge<Todo.listId>
}

The UI is updated via live queries. Whenever a modification is made to a model through a mutator, that update is reflected back into the UI.

Live queries are here.

const activeTodos = useQuery(() =>
  list.queryTodos().whereCompleted(P.equals(false))
).data;
const completeTodos = useQuery(() =>
  list.queryTodos().whereCompleted(P.equals(true))
).data;
const allTodos = useQuery(() => list.queryTodos(), [], {
  on: UpdateType.CREATE_OR_DELETE,
}).data;

Either open in GitPod or follow the steps below --

First, clone this repository

git clone [email protected]:tantaman/aphrodite-browser-starter.git

Next, cd to aphrodite-browser-starter and install dependencies.

cd aphrodite-browser-starter
npm install

The command to build and run the "demo app" are:

npm run serve

If you change the schema and want to re-generate the generated code, run

npm run aphro

This "demo app" is an implementation of TodoMVC using Aphrodite & React --