`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>`	An Accessor that returns the `Persister`, or `undefined` while it is being created.

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.

The returned Accessor yields undefined until the Persister has been created and while a replacement is being created. The optional destroy callback is called after the Persister's asynchronous destruction has completed.

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