The graph database for simple React state management
# NPM
npm install homebase-react --save
# Yarn
yarn add homebase-reacthttps://www.notion.so/Homebase-Alpha-Docs-0f0e22f3adcd4e9d87a13440ab0c7a0b
You can see our hosted live demos here
You can clone and run our React code examples here.
We want software to be local-first. That means we need to make it more convenient to work with complex data on clients.
Homebase React lets you plug a relational database into your React app.
- Replace Redux with something simpler and more declarative
- Gain all the benefits of relational data like a single source of truth
- Query your database with a convenient JSON query syntax
- Query your database with datalog if you need more power
- Traverse your data graph like it's one big JSON object
It is immediately more intuitive than a denormalized JSON store, and over time it will get better as we add more local-first features to it.
import { HomebaseProvider, useEntity, useTransact, useQuery } from 'homebase-react'
const config = {
// Schema is optional
// ref indicates a relationship
// unique enforces a uniqueness constraint
schema: {
todo: {
project: { type: 'ref' },
name: { unique: 'identity' }
}
},
initialData: [
{ project: { id: -1, name: 'Do it' } }
{ todo: { project: -1, name: 'Make it' }}
]
}
const RootComponent = () => (
<HomebaseProvider config={config}>
<App/>
</HomebaseProvider>
)// Entities with unique attributes can be retrieved by those attributes
const [todo] = useEntity({ todo: { name: 'Make it' } })
// Get attributes off an entity
todo.get('name') // => 'Make it'
todo.get('id') // => 2
// You can also get an entity by its id
const [sameTodo] = useEntity(2)
// And traverse relationships
todo.get('project', 'name') // => 'Do it'const transact = useTransact()
// A transaction is an array of nested objects
transact([{ todo: { name: 'New Todo', project: 1 } }])
// Update an entity by including its id
transact([{ project: { id: 1, name: 'Changed Project Title' } }])
// Delete an entity with retractEntity and its id
transact([['retractEntity', 1]])// Finds any todo with a name
const [todos] = useQuery({
$find: 'todo',
$where: { todo: { name: '$any' } }
})
// Returns an array of todo entities
todos.map(todo => todo.get('name'))npx shadow-cljs watch :dev- Improve performance
- Document integration with backends
- Swap Datascript out for Datahike
- Immutability
- History / Change Tracking
- Persist to IndexDB
- Local-first conflict resolution for offline caching and sync between multiple devices
- Chris Smothers (@csmothers) – Homebase
- JB Rubinovitz (@rubinovitz) – Homebase