useSetParamValuesCallback
The useSetParamValuesCallback primitive returns a parameterized callback that can be used to set multiple parameter values for a query at once.
useSetParamValuesCallback<Parameter>(
queryId: MaybeAccessor<string> | GetId<Parameter>,
getParamValues: (parameter: Parameter, queries: Queries) => ParamValues,
queriesOrQueriesId?: MaybeAccessor<undefined | QueriesOrQueriesId>,
then?: (queries: Queries, paramValues: ParamValues) => void,
): ParameterizedCallback<Parameter>| Type | Description | |
|---|---|---|
queryId | MaybeAccessor<string> | GetId<Parameter> | The |
getParamValues | (parameter: Parameter, queries: Queries) => ParamValues | A function which returns the parameter values object that will be used to update the query, based on the parameter the callback will receive (and which is most likely a DOM event). |
queriesOrQueriesId? | MaybeAccessor<undefined | QueriesOrQueriesId> | The |
then? | (queries: Queries, paramValues: ParamValues) => void | A function which is called after the mutation, with a reference to the |
| returns | ParameterizedCallback<Parameter> | A parameterized callback for subsequent use. |
This primitive is useful, for example, when creating an event handler that will update multiple query parameters based on user interaction. In this case, the parameter will likely be the event, so that you can use data from it to update the query parameters.
The second parameter is a function which will produce the parameter values object that will then be used to update the query in the callback.
For convenience, you can optionally provide a then function which will be called just after the query parameters have been updated.
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 {useSetParamValuesCallback} 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');
useSetParamValuesCallback(
'petColors',
() => ({species: 'cat'}),
queries,
)();
dispose();
});
Since
v8.3.0