provideQueries
The provideQueries function registers a Queries object with a given Id into the current Provider context.
provideQueries(
queriesId: string,
queries: Queries,
): void| Type | Description | |
|---|---|---|
queriesId | string | |
queries | Queries | The |
| returns | void | This has no return value. |
Example
This example registers a TinyBase object dynamically in a Provider context.
Registrar.svelte
<svelte:options runes={true} />
<script>
import {provideQueries} from 'tinybase/ui-svelte';
let {queries} = $props();
provideQueries('registered', queries);
</script>
Reader.svelte
<svelte:options runes={true} />
<script>
import {getQueriesIds} from 'tinybase/ui-svelte';
const ids = getQueriesIds();
</script>
{JSON.stringify(getQueriesIds().current)}
App.svelte
<svelte:options runes={true} />
<script>
import {Provider} from 'tinybase/ui-svelte';
import Reader from './Reader.svelte';
import Registrar from './Registrar.svelte';
let {queries} = $props();
</script>
<Provider>
<Registrar {queries} />
<Reader />
</Provider>
import {flushSync, mount} from 'svelte';
import {createQueries, createStore} from 'tinybase';
import App from './App.svelte';
const store = createStore().setCell('pets', 'fido', 'species', 'dog');
const queries = createQueries(store).setQueryDefinition(
'petSpecies',
'pets',
({select}) => select('species'),
);
const app = document.body.appendChild(document.createElement('div'));
flushSync(() => mount(App, {target: app, props: {queries}}));
flushSync();
console.log(app.textContent);
// -> ' ["registered"]'
Since
v8.1.0