TinyBase logoTinyBase β

useParamValuesState

The useParamValuesState primitive returns an array containing all the parameter values for a query, and a callback for changing them, providing an easy way to bind a query's parameters to a user-controlled component.

useParamValuesState(
  queryId: MaybeAccessor<string>,
  queriesOrQueriesId?: MaybeAccessor<undefined | QueriesOrQueriesId>,
): [Accessor<ParamValues>, (paramValues: ParamValues) => void]
TypeDescription
queryIdMaybeAccessor<string>

The Id of the query.

queriesOrQueriesId?MaybeAccessor<undefined | QueriesOrQueriesId>

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

returns[Accessor<ParamValues>, (paramValues: ParamValues) => void]

An array containing the parameter values and a function to set them.

This is a convenience primitive that combines the useParamValues and useSetParamValuesCallback primitives. It's useful when you need both read and write access to query parameters in a single component.

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

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 {useParamValuesState} 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');
  useParamValuesState('petColors', queries);
  dispose();
});

Since

v8.3.0