`useCreatePersister`

The useCreatePersister primitive is used to create a Persister within a Solid application along with convenient memoization and callbacks.

useCreatePersister<Persist, PersisterOrUndefined>(
  store: MaybeAccessor<undefined | PersistedStore<Persist>>,
  create: (store: PersistedStore<Persist>) => PersisterOrUndefined | Promise<PersisterOrUndefined>,
  then?: (persister: Persister<Persist>) => Promise<any>,
  destroy?: (persister: Persister<Persist>) => void,
): Accessor<PersisterOrUndefined | undefined>

	Type	Description
`store`	`MaybeAccessor<undefined \| PersistedStore<Persist>>`
`create`	`(store: PersistedStore<Persist>) => PersisterOrUndefined \| Promise<PersisterOrUndefined>`
`then?`	`(persister: Persister<Persist>) => Promise<any>`
`destroy?`	`(persister: Persister<Persist>) => void`
returns	`Accessor<PersisterOrUndefined \| undefined>`	A reference to the `Persister`.

It is possible to create a Persister outside of the Solid app with the regular createPersister function and pass it in, but you may prefer to create it within the app, perhaps inside the top-level component. To prevent a new Persister being created every time the app renders or updates, since v5.0 the this primitive performs the creation in an effect.

Example

This example creates the TinyBase objects needed by the Solid primitive or component and calls it from within a reactive root.

import {createRoot} from 'solid-js';
import {
  createCheckpoints,
  createIndexes,
  createMetrics,
  createQueries,
  createRelationships,
  createStore,
} from 'tinybase';
import {useCreatePersister} from 'tinybase/ui-solid';

createRoot((dispose) => {
  const store = createStore()
    .setTables({
      pets: {
        fido: {species: 'dog', color: 'brown', next: 'felix'},
        felix: {species: 'cat', color: 'black'},
      },
      species: {dog: {price: 5}, cat: {price: 4}},
    })
    .setValues({open: true});
  const metrics = createMetrics(store).setMetricDefinition(
    'highestPrice',
    'species',
    'max',
    'price',
  );
  const indexes = createIndexes(store).setIndexDefinition(
    'bySpecies',
    'pets',
    'species',
  );
  const relationships = createRelationships(store)
    .setRelationshipDefinition('petSpecies', 'pets', 'species', 'species')
    .setRelationshipDefinition('nextPet', 'pets', 'pets', 'next');
  const queries = createQueries(store).setQueryDefinition(
    'petColors',
    'pets',
    ({select, where, param}) => {
      select('color');
      where((getCell) => getCell('species') == param('species'));
    },
    {species: 'dog'},
  );
  const checkpoints = createCheckpoints(store);
  store.setCell('pets', 'fido', 'color', 'walnut');
  checkpoints.setCheckpoint('updated color');
  metrics.getMetric('highestPrice');
  indexes.getSliceIds('bySpecies');
  relationships.getRemoteRowId('petSpecies', 'fido');
  queries.getResultRowIds('petColors');
  useCreatePersister(undefined, async () => undefined);
  dispose();
});

Since

v8.3.0