`useCreateSynchronizer`

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

useCreateSynchronizer<SynchronizerOrUndefined>(
  store: MaybeAccessor<undefined | MergeableStore>,
  create: (store: MergeableStore) => Promise<SynchronizerOrUndefined>,
  destroy?: (synchronizer: Synchronizer) => void,
): Accessor<SynchronizerOrUndefined | undefined>

	Type	Description
`store`	`MaybeAccessor<undefined \| MergeableStore>`	A reference to the `MergeableStore` for which to create a new `Synchronizer` object.
`create`	`(store: MergeableStore) => Promise<SynchronizerOrUndefined>`	An asynchronous function for performing the creation steps of the `Synchronizer` object for the `Store`.
`destroy?`	`(synchronizer: Synchronizer) => void`	An optional callback whenever the `Synchronizer` is destroyed when its create function observes different reactive input.
returns	`Accessor<SynchronizerOrUndefined \| undefined>`	A reference to the `Synchronizer`.

It is possible to create a Synchronizer outside of the Solid app with the regular createSynchronizer 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 Synchronizer being created every time the app renders or updates, the useCreateSynchronizer primitive performs the creation in an effect.

If your asynchronous create function reads changing signals or Accessors, Solid will track those reads in the current owner.

The create function can return undefined, meaning that you can enable or disable synchronization conditionally within this primitive. This is useful for applications which might turn on or off their cloud synchronization or collaboration features.

This primitive ensures the Synchronizer object is destroyed whenever a new one is created or the component is unmounted.

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 {useCreateSynchronizer} 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');
  useCreateSynchronizer(undefined, async () => undefined);
  dispose();
});

Since

v8.3.0