Skip to main content

React + Datalog

How to use in React

There's a helper package called @datalogui/react that includes a couple helpful hooks.

At the time of this writing there's just one:

useQuery

This hook returns all the data gathered from the query and will request a re-render when one of the query dependencies change.

Here's a typescript example:

interface TodoInterface {
id: string;
text: string;
isCompleted: boolean;
}

// Our main Todos table
const Todos = datalog.newTable<TodoInterface>({
id: datalog.StringType,
text: datalog.StringType,
isCompleted: datalog.BoolType
})


function AllTodos() {
// A simple query to return all the todos not completed
const todos = useQuery(({id, text}: TodoInterface) => {
Todos({id, text, isCompleted: false})
})

<div>
<h2>Your todos are:</h2>
{todos.map(todo => (<p key={todo.id}>{todo.text}</p>))}
</div>

}