solid-orbit


Solid bindings for Orbit.

This package provides Solid a provider and hooks for Orbit. Most notably, this provides a useQuery hook which is a query transform listener, updating component props with records as they are changed.

Based heavily on developertown/react-orbitjs.

Installation

npm
``
npm install --save solid-orbit
`

yarn
`
yarn add solid-orbit
`

Example

Components that use hooks from this library must be children of OrbitProvider.

`tsx
import { render, template, insert, createComponent } from 'solid-js/dom'
import MemorySource from '@orbit/memory'
import { Schema } from '@orbit/data'
import { OrbitProvider, OrbitRecord } from 'solid-orbit'

const schema = new Schema({
models: {
planet: {
attributes: {
name: { type: 'string' }
}
}
}
})

const memory = new MemorySource({ schema });

const PlanetList: Component = () => {
const recordsToPlanets = (records: OrbitRecord[]): string[] =>
records.map(record => record?.attributes.name as string)
const query = useQuery<{planets: string[]}>({
planets: [
q => q.findRecords("planet").sort("name"),
recordsToPlanets
]
})

const actions = useUpdates({
addPlanet: (name: string) => (t) => t.addRecord({
type: 'planet',
id: name,
attributes: {
name
}
}),
removePlanet: (name: string) => t => t.removeRecord({
type: 'planet',
id: name
})
})

const [newPlanet, setNewPlanet] = createSignal()

return (
<>


{(planet) =>

• {planet}

actions.removePlanet(planet)}>Delete
}

render(() => , document.body)
`

API

$3

Provider for using orbit hooks.

$3

Hook which takes an object where the fields are queries coupled with a transform function, and returns a signal object that updates when query results are changed by a transform.

$3

Hook which takes an object of functions that return transform builder functions, and maps them to an object of functions that return Promise`.