useCreateQueries
The useCreateQueries
hook is used to create a Queries
object within a React application with convenient memoization.
useCreateQueries(
store: Store,
create: (store: Store) => Queries,
createDeps?: DependencyList,
): Queries
Type | Description | |
---|---|---|
store | Store | A reference to the |
create | (store: Store) => Queries | An optional callback for performing post-creation steps on the |
createDeps? | DependencyList | An optional array of dependencies for the |
returns | Queries | A reference to the |
It is possible to create a Queries
object outside of the React app with the regular createQueries
function and pass it in, but you may prefer to create it within the app, perhaps inside the top-level component. To defend against a new Queries
object being created every time the app renders or re-renders, the useCreateQueries
hook wraps the creation in a memoization.
The useCreateQueries
hook is a very thin wrapper around the React useMemo
hook, defaulting to the provided Store
as its dependency, so that by default, the creation only occurs once per Store
.
If your create
function contains other dependencies, the changing of which should also cause the Queries
object to be recreated, you can provide them in an array in the optional second parameter, just as you would for any React hook with dependencies.
This hook ensures the Queries
object is destroyed whenever a new one is created or the component is unmounted.
Examples
This example creates a Queries
object at the top level of a React application. Even though the App component is rendered twice, the Queries
object creation only occurs once by default.
const App = () => {
const store = useCreateStore(() =>
createStore().setTable('pets', {
fido: {species: 'dog', color: 'brown'},
felix: {species: 'cat', color: 'black'},
cujo: {species: 'dog', color: 'black'},
}),
);
const queries = useCreateQueries(store, (store) => {
console.log('Queries created');
return createQueries(store).setQueryDefinition(
'dogColors',
'pets',
({select, where}) => {
select('color');
where('species', 'dog');
},
);
});
return (
<span>{queries.getResultCell('dogColors', 'fido', 'color')}</span>
);
};
const app = document.createElement('div');
const root = ReactDOMClient.createRoot(app);
root.render(<App />);
// -> 'Queries created'
root.render(<App />);
// No second Queries creation
console.log(app.innerHTML);
// -> '<span>brown</span>'
This example creates a Queries
object at the top level of a React application. The App component is rendered twice, each with a different top-level prop. The useCreateQueries
hook takes the resultCell
prop as a dependency, and so the Queries
object is created again on the second render.
const App = () => {
const store = useCreateStore(() =>
createStore().setTable('pets', {
fido: {species: 'dog', color: 'brown'},
felix: {species: 'cat', color: 'black'},
cujo: {species: 'dog', color: 'black'},
}),
);
const queries = useCreateQueries(store, (store) => {
console.log('Queries created');
return createQueries(store).setQueryDefinition(
'dogColors',
'pets',
({select, where}) => {
select('color');
where('species', 'dog');
},
);
});
return (
<span>{queries.getResultCell('dogColors', 'fido', 'color')}</span>
);
};
const app = document.createElement('div');
const root = ReactDOMClient.createRoot(app);
root.render(<App />);
// -> 'Queries created'
root.render(<App />);
// No second Queries creation
console.log(app.innerHTML);
// -> '<span>brown</span>'
Since
v2.0.0