`useParamValues`

The useParamValues hook returns an object containing all the parameter values currently set for a query.

useParamValues(
  queryId: string,
  queriesOrQueriesId?: QueriesOrQueriesId,
): ParamValues | undefined

Type Description

	Type	Description
`queryId`	`string`	The `Id` of the query to get parameter values for.
`queriesOrQueriesId?`	`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	`ParamValues \| undefined`	An object containing all parameter values for the query, or undefined if the query doesn't exist.

queryId

string

The Id of the query to get parameter values for.

queriesOrQueriesId?

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

ParamValues | undefined

An object containing all parameter values for the query, or undefined if the query doesn't exist.

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 useParamValues hook lets you indicate which Queries object to get data for: omit the optional final parameter for the default context Queries object, provide an Id for a named context Queries object, or provide a Queries object explicitly by reference.

When first rendered, this hook will create a listener so that changes to the parameter values will cause a re-render. When the component containing this hook is unmounted, the listener will be automatically removed.

Examples

This example creates a Queries object outside the application, which is used in the useParamValues hook by reference. A change to the parameter values re-renders the component.

import React from 'react';
import {createQueries, createStore} from 'tinybase';
import {createRoot} from 'react-dom/client';
import {useParamValues} from 'tinybase/ui-react';

const store = createStore().setTable('pets', {
  fido: {species: 'dog', color: 'brown'},
  felix: {species: 'cat', color: 'black'},
});
const queries = createQueries(store);
queries.setQueryDefinition(
  'petsBySpecies',
  'pets',
  ({select, where, param}) => {
    select('species');
    where('species', param('species'));
  },
  {species: 'dog'},
);

const App = () => (
  <span>{JSON.stringify(useParamValues('petsBySpecies', queries))}</span>
);

const app = document.createElement('div');
createRoot(app).render(<App />);
console.log(app.innerHTML);
// -> '<span>{"species":"dog"}</span>'

queries.setParamValue('petsBySpecies', 'species', 'cat');
console.log(app.innerHTML);
// -> '<span>{"species":"cat"}</span>'

This example creates a Provider context into which a default Queries object is provided. A component within it then uses the useParamValues hook.

import {Provider, useParamValues} from 'tinybase/ui-react';
import React from 'react';
import {createQueries, createStore} from 'tinybase';
import {createRoot} from 'react-dom/client';

const App = ({queries}) => (
  <Provider queries={queries}>
    <Pane />
  </Provider>
);
const Pane = () => (
  <span>{JSON.stringify(useParamValues('petsBySpecies'))}</span>
);

const store = createStore().setTable('pets', {
  fido: {species: 'dog'},
  felix: {species: 'cat'},
});
const queries = createQueries(store);
queries.setQueryDefinition(
  'petsBySpecies',
  'pets',
  ({select, where, param}) => {
    select('species');
    where('species', param('species'));
  },
  {species: 'dog'},
);

const app = document.createElement('div');
createRoot(app).render(<App queries={queries} />);
console.log(app.innerHTML);
// -> '<span>{"species":"dog"}</span>'

This example creates a Provider context into which a Queries object is provided, named by Id. A component within it then uses the useParamValues hook.

import {Provider, useParamValues} from 'tinybase/ui-react';
import React from 'react';
import {createQueries, createStore} from 'tinybase';
import {createRoot} from 'react-dom/client';

const App = ({queries}) => (
  <Provider queriesById={{petQueries: queries}}>
    <Pane />
  </Provider>
);
const Pane = () => (
  <span>
    {JSON.stringify(useParamValues('petsBySpecies', 'petQueries'))}
  </span>
);

const store = createStore().setTable('pets', {
  fido: {species: 'dog'},
  felix: {species: 'cat'},
});
const queries = createQueries(store);
queries.setQueryDefinition(
  'petsBySpecies',
  'pets',
  ({select, where, param}) => {
    select('species');
    where('species', param('species'));
  },
  {species: 'dog'},
);

const app = document.createElement('div');
createRoot(app).render(<App queries={queries} />);
console.log(app.innerHTML);
// -> '<span>{"species":"dog"}</span>'

Since

v7.2.0