useQueries

The useQueries hook is used to get a reference to a Queries object from within a Provider component context.

useQueries(id?: string): Queries | undefined
TypeDescription
id?string

An optional Id for accessing a Queries object that was named with an Id in the Provider.

returnsQueries | undefined

A reference to the Queries object (or `undefined` if not within a Provider context, or if the requested Queries object does not exist)

A Provider component is used to wrap part of an application in a context. It can contain a default Queries object (or a set of Queries objects named by Id) that can be easily accessed without having to be passed down as props through every component.

The useQueries hook lets you either get a reference to the default Queries object (when called without an parameter), or one of the Queries objects that are named by Id (when called with an Id parameter).

Examples

This example creates a Provider context into which a default Queries object is provided. A component within it then uses the useQueries hook to get a reference to the Queries object again, without the need to have it passed as a prop.

const App = ({queries}) => (
  <Provider queries={queries}>
    <Pane />
  </Provider>
);
const Pane = () => <span>{useQueries().getListenerStats().table}</span>;

const queries = createQueries(createStore());
const app = document.createElement('div');
ReactDOM.render(<App queries={queries} />, app);
console.log(app.innerHTML);
// -> '<span>0</span>'

This example creates a Provider context into which a Queries object is provided, named by Id. A component within it then uses the useQueries hook with that Id to get a reference to the Queries object again, without the need to have it passed as a prop.

const App = ({queries}) => (
  <Provider queriesById={{petQueries: queries}}>
    <Pane />
  </Provider>
);
const Pane = () => (
  <span>{useQueries('petQueries').getListenerStats().table}</span>
);

const queries = createQueries(createStore());
const app = document.createElement('div');
ReactDOM.render(<App queries={queries} />, app);
console.log(app.innerHTML);
// -> '<span>0</span>'

Since

v2.0.0