`useCreateCheckpoints`

The useCreateCheckpoints primitive is used to create a Checkpoints object within a Solid application with convenient memoization.

useCreateCheckpoints(
  store: MaybeAccessor<undefined | Store>,
  create: (store: Store) => Checkpoints,
): Accessor<Checkpoints | undefined>

Type Description

	Type	Description
`store`	`MaybeAccessor<undefined \| Store>`	A reference to the `Store` for which to create a new `Checkpoints` object.
`create`	`(store: Store) => Checkpoints`	A function for performing the creation steps of the `Checkpoints` object for the `Store`, plus any additional steps such as adding definitions or listeners, and returning it.
returns	`Accessor<Checkpoints \| undefined>`	A reference to the `Checkpoints` object.

store

MaybeAccessor<undefined | Store>

A reference to the Store for which to create a new Checkpoints object.

create

(store: Store) => Checkpoints

A function for performing the creation steps of the Checkpoints object for the Store, plus any additional steps such as adding definitions or listeners, and returning it.

returns

Accessor<Checkpoints | undefined>

A reference to the Checkpoints object.

It is possible to create a Checkpoints object outside of the Solid app with the regular createCheckpoints 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 Checkpoints object being created every time the app renders or updates, since v5.0 this primitive performs the creation in an effect. As a result it will return undefined on the brief first render (or if the Store is not yet defined), which you should defend against.

This primitive ensures the Checkpoints 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 {useCreateCheckpoints} 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');
  useCreateCheckpoints(store, (store) => createCheckpoints(store));
  dispose();
});

Since

v8.3.0