TinyBase logoTinyBase β

useSynchronizerStatus

The useSynchronizerStatus primitive returns a the status of a Synchronizer, and registers a listener so that any changes to it will cause an update.

useSynchronizerStatus(synchronizerOrSynchronizerId?: MaybeAccessor<undefined | SynchronizerOrSynchronizerId>): Accessor<Status>
TypeDescription
synchronizerOrSynchronizerId?MaybeAccessor<undefined | SynchronizerOrSynchronizerId>

The Synchronizer to be accessed: omit for the default context Synchronizer, provide an Id for a named context Synchronizer, or provide an explicit reference.

returnsAccessor<Status>

The status of the Synchronizer: 0 means idle, 1 means loading, and 2 means saving.

A Provider component is used to wrap part of an application in a context, and it can contain a default Synchronizer or a set of Synchronizer objects named by Id. The useSynchronizerStatus primitive lets you indicate which Synchronizer to get data for: omit the optional parameter for the default context Synchronizer, provide an Id for a named context Synchronizer, or provide a Synchronizer explicitly by reference.

When first rendered, this primitive will create a listener so that changes to the Synchronizer status will cause an update. When the component containing this primitive is unmounted, the listener will be automatically removed.

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 {useSynchronizerStatus} 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');
  useSynchronizerStatus();
  dispose();
});

Since

v8.3.0