`useSliceRowIds`

The useSliceRowIds primitive gets the list of Row Ids in a given Slice, and registers a listener so that any changes to that result will cause an update.

useSliceRowIds(
  indexId: MaybeAccessor<string>,
  sliceId: MaybeAccessor<string>,
  indexesOrIndexesId?: MaybeAccessor<undefined | IndexesOrIndexesId>,
): Accessor<Ids>

	Type	Description
`indexId`	`MaybeAccessor<string>`	The `Id` of the `Index`.
`sliceId`	`MaybeAccessor<string>`	The `Id` of the `Slice` in the `Index`.
`indexesOrIndexesId?`	`MaybeAccessor<undefined \| IndexesOrIndexesId>`	The `Indexes` object to be accessed: omit for the default context `Indexes` object, provide an `Id` for a named context `Indexes` object, or provide an explicit reference.
returns	`Accessor<Ids>`	The `Row` `Ids` in the `Slice`, or an empty array.

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

When first rendered, this primitive will create a listener so that changes to the Row Ids in the Slice 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 {useSliceRowIds} 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');
  useSliceRowIds('bySpecies', 'dog', indexes);
  dispose();
});

Since

v8.3.0