@livestore/livestore
v0.0.47
Published
```sh # Install deps and build libs pnpm install pnpm build
Downloads
128
Readme
Local setup
# Install deps and build libs
pnpm install
pnpm build
# Run the example app
cd examples/todomvc
pnpm dev
Caveats
- Only supports recent browser versions (Safari 17+, ...)
- Doesn't yet run in Next.js (easiest to use with Vite right now)
Features
- Synchronous, transactional reads and writes
- Otel tracing built-in
Concepts
LiveStore provides a highly structured data model for your React components. It helps you clearly reason about data dependencies, leverage the relational model and the power of SQLite, and persist UI state.
Reads
To define the data used by a component, you use the useQuery
hook. There are 2 parts to defining the data:
- local state: This is the equivalent of
React.useState
, but in a relational style. Each component instance gets a row in a database table to store local state. You define the schema for the table that stores this component state. In your component, you can read/write local state. - reactive queries: Often it's not enough to just read/write local state, you also need to query data in the global database (eg, table of todos, or table of music tracks). To do this, you can define reactive SQL or GraphQL queries. The query strings can be dynamic and depend on local state or other queries. You can also
.pipe
the results of any SQL or GraphQL query to do further downstream transformations.
Let's see an example. This doesn't have any local state, just queries.
We have a todos app which has a global table called app
, which always has one row. It has a column called filter
which has the value active
, completed
, or all
. We want to use this value to query for only the todos which should be visible with that filter. Here's the code:
import { querySQL, sql } from '@livestore/livestore'
import { useQuery } from '@livestore/livestore/react'
const filterClause$ = querySQL<AppState[]>(`select * from app;`)
.pipe(([appState]) => (appState.filter === 'all' ? '' : `where completed = ${appState.filter === 'completed'}`))
const visibleTodos$ = querySQL<Todo[]>((get) => sql`select * from todos ${get(filterClause$)}`)
export const MyApp: React.FC = () => {
const visibleTodos = useQuery(visibleTodos$)
return (
// ...
)
}
Writes
Writes happen through mutations: structured mutations on the LiveStore datastore. Think closer to Redux-style mutations at the domain level, rather than low-level SQL writes. This makes it clearer what's going on in the code, and enables other things like sync / undo in the future.
Write mutations can be accessed via the useLiveStoreActions
hook. This is global and not component-scoped. (If you want to do a write that references some local state, you can just pass it in to the mutation arguements.)
const { store } = useStore()
// We record an event that specifies marking complete or incomplete,
// The reason is that this better captures the user's intention
// when the event gets synced across multiple devices--
// If another user toggled concurrently, we shouldn't toggle it back
const toggleTodo = (todo: Todo) =>
store.mutate(todo.completed ? mutations.uncompleteTodo({ id: todo.id }) : mutations.completeTodo({ id: todo.id }))
Defining dependencies
LiveStore tracks which tables are read by each query and written by each mutation, in order to determine which queries need to be re-run in response to each write.
In the future we want to do this more automatically via analysis of queries, but currently this write/read table tracking is done manually. It's very important to correctly annotate write and reads with table names, otherwise reactive updates won't work correctly.
Here's how writes and reads are annotated.
Write mutations: annotate the SQL statement in the mutation definition, like this:
export const completeTodo = defineMutation(
'completeTodo',
Schema.struct({ id: Schema.string }),
sql`UPDATE todos SET completed = true WHERE id = $id`,
)
GraphQL: annotate the query in the resolver, like this:
spotifyAlbum = (albumId: string) => {
this.queriedTables.add('album_images').add('albums')
const albums = this.db.select<AlbumSrc[]>(sql`
select id, name,
(
select image_url
from ${tableNames.album_images}
where album_images.album_id = albums.id
order by height desc -- use the big image for this view
limit 1
) as image_url
from albums
where id = '${albumId}'
`)
return albums[0] ?? null
}
SQL: manual table annotation is not supported yet on queries, todo soon.