`useParamValueState`

The useParamValueState primitive returns a parameter value and a function to set it, following the same pattern as Solid's createSignal convention.

useParamValueState(
  queryId: MaybeAccessor<string>,
  paramId: MaybeAccessor<string>,
  queriesOrQueriesId?: MaybeAccessor<undefined | QueriesOrQueriesId>,
): [Accessor<ParamValue | undefined>, (paramValue: ParamValue) => void]

	Type	Description
`queryId`	`MaybeAccessor<string>`	The `Id` of the query.
`paramId`	`MaybeAccessor<string>`	The `Id` of the parameter.
`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<ParamValue \| undefined>, (paramValue: ParamValue) => void]`	An array containing the parameter value and a function to set it.

This is a convenience primitive that combines the useParamValue and useSetParamValueCallback primitives. It's useful when you need both read and write access to a query parameter 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 useParamValueState 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 {useParamValueState} 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');
  useParamValueState('petColors', 'species', queries);
  dispose();
});

Since

v8.3.0