`useGoToCallback`

The useGoToCallback primitive returns a parameterized callback that can be used to move the state of the underlying Store backwards or forwards to a specified checkpoint.

useGoToCallback<Parameter>(
  getCheckpointId: (parameter: Parameter) => string,
  checkpointsOrCheckpointsId?: MaybeAccessor<undefined | CheckpointsOrCheckpointsId>,
  then?: (checkpoints: Checkpoints, checkpointId: string) => void,
): ParameterizedCallback<Parameter>

	Type	Description
`getCheckpointId`	`(parameter: Parameter) => string`	A function which returns an `Id` that will be used to indicate which checkpoint to move to, based on the parameter the callback will receive (and which is most likely a DOM event).
`checkpointsOrCheckpointsId?`	`MaybeAccessor<undefined \| CheckpointsOrCheckpointsId>`	The `Checkpoints` object to be updated: omit for the default context `Checkpoints` object, provide an `Id` for a named context `Checkpoints` object, or provide an explicit reference.
`then?`	`(checkpoints: Checkpoints, checkpointId: string) => void`	A function which is called after the checkpoint is moved, with a reference to the `Checkpoints` object and the checkpoint `Id` moved to.
returns	`ParameterizedCallback<Parameter>`	A parameterized callback for subsequent use. This parameter defaults to an empty array.

This primitive is useful, for example, when creating an event handler that will move the checkpoint. In this case, the parameter will likely be the event, so that you can use data from it as the checkpoint Id to move to.

The optional first parameter is a function which will produce the label that will then be used to name the checkpoint.

For convenience, you can optionally provide a then function which will be called just after the checkpoint has been set.

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 {useGoToCallback} 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');
  useGoToCallback(() => '0', checkpoints)();
  dispose();
});

Since

v8.3.0