tinybase 1.3.4 → 2.0.0-beta.1

package/lib/debug/ui-react.d.ts

@@ -53,6 +53,14 @@ import {
   RemoteRowIdListener,
 } from './relationships.d';
 import {MetricListener, Metrics} from './metrics.d';
+import {
+  Queries,
+  ResultCellIdsListener,
+  ResultCellListener,
+  ResultRowIdsListener,
+  ResultRowListener,
+  ResultTableListener,
+} from './queries.d';
 import {Persister} from './persisters.d';
 
 /**
@@ -129,6 +137,25 @@ export type IndexesOrIndexesId = Indexes | Id;
  */
 export type RelationshipsOrRelationshipsId = Relationships | Id;
 
+/**
+ * The QueriesOrQueriesId type is used when you need to refer to a Queries
+ * object in a React hook or component.
+ *
+ * In some simple cases you will already have a direct reference to the Queries
+ * object.
+ *
+ * This module also includes a Provider component that can be used to wrap
+ * multiple Queries objects into a context that can be used throughout the app.
+ * In this case you will want to refer to a Queries object by its Id in that
+ * context.
+ *
+ * Many hooks and components in this ui-react module take this type as a
+ * parameter or a prop, allowing you to pass in either the Store or its Id.
+ *
+ * @category Identity
+ */
+export type QueriesOrQueriesId = Queries | Id;
+
 /**
  * The CheckpointsOrCheckpointsId type is used when you need to refer to a
  * Checkpoints object in a React hook or component.
@@ -399,6 +426,9 @@ export function useTables(storeOrStoreId?: StoreOrStoreId): Tables;
  * @param storeOrStoreId The Store to be accessed: omit for the default context
  * Store, provide an Id for a named context Store, or provide an explicit
  * reference.
+ * @param trackReorder Since v2.0.0, an optional boolean that indicates that the
+ * listener should be called if the set of Ids remains the same but their order
+ * changes. See the addTableIdsListener method for more details.
  * @returns An array of the Ids of every Table in the Store.
  * @example
  * This example creates a Store outside the application, which is used in the
@@ -456,7 +486,10 @@ export function useTables(storeOrStoreId?: StoreOrStoreId): Tables;
  * ```
  * @category Store hooks
  */
-export function useTableIds(storeOrStoreId?: StoreOrStoreId): Ids;
+export function useTableIds(
+  storeOrStoreId?: StoreOrStoreId,
+  trackReorder?: boolean,
+): Ids;
 
 /**
  * The useTable hook returns an object containing the entire data of a single
@@ -557,6 +590,9 @@ export function useTable(tableId: Id, storeOrStoreId?: StoreOrStoreId): Table;
  * @param storeOrStoreId The Store to be accessed: omit for the default context
  * Store, provide an Id for a named context Store, or provide an explicit
  * reference.
+ * @param trackReorder Since v2.0.0, an optional boolean that indicates that the
+ * listener should be called if the set of Ids remains the same but their order
+ * changes. See the addRowIdsListener method for more details.
  * @returns An array of the Ids of every Row in the Table.
  * @example
  * This example creates a Store outside the application, which is used in the
@@ -616,7 +652,11 @@ export function useTable(tableId: Id, storeOrStoreId?: StoreOrStoreId): Table;
  * ```
  * @category Store hooks
  */
-export function useRowIds(tableId: Id, storeOrStoreId?: StoreOrStoreId): Ids;
+export function useRowIds(
+  tableId: Id,
+  storeOrStoreId?: StoreOrStoreId,
+  trackReorder?: boolean,
+): Ids;
 
 /**
  * The useRow hook returns an object containing the entire data of a single Row
@@ -725,6 +765,9 @@ export function useRow(
  * @param storeOrStoreId The Store to be accessed: omit for the default context
  * Store, provide an Id for a named context Store, or provide an explicit
  * reference.
+ * @param trackReorder Since v2.0.0, an optional boolean that indicates that the
+ * listener should be called if the set of Ids remains the same but their order
+ * changes. See the addCellIdsListener method for more details.
  * @returns An array of the Ids of every Cell in the Row.
  * @example
  * This example creates a Store outside the application, which is used in the
@@ -792,6 +835,7 @@ export function useCellIds(
   tableId: Id,
   rowId: Id,
   storeOrStoreId?: StoreOrStoreId,
+  trackReorder?: boolean,
 ): Ids;
 
 /**
@@ -1798,6 +1842,9 @@ export function useTablesListener(
  * @param listenerDeps An optional array of dependencies for the `listener`
  * function, which, if any change, result in the re-registration of the
  * listener. This parameter defaults to an empty array.
+ * @param trackReorder Since v2.0.0, an optional boolean that indicates that the
+ * listener should be called if the set of Ids remains the same but their order
+ * changes. See the addTableIdsListener method for more details.
  * @param mutator An optional boolean that indicates that the listener mutates
  * Store data.
  * @param storeOrStoreId The Store to register the listener with: omit for the
@@ -1837,6 +1884,7 @@ export function useTablesListener(
 export function useTableIdsListener(
   listener: TableIdsListener,
   listenerDeps?: React.DependencyList,
+  trackReorder?: boolean,
   mutator?: boolean,
   storeOrStoreId?: StoreOrStoreId,
 ): void;
@@ -1929,6 +1977,9 @@ export function useTableListener(
  * @param listenerDeps An optional array of dependencies for the `listener`
  * function, which, if any change, result in the re-registration of the
  * listener. This parameter defaults to an empty array.
+ * @param trackReorder Since v2.0.0, an optional boolean that indicates that the
+ * listener should be called if the set of Ids remains the same but their order
+ * changes. See the addRowIdsListener method for more details.
  * @param mutator An optional boolean that indicates that the listener mutates
  * Store data.
  * @param storeOrStoreId The Store to register the listener with: omit for the
@@ -1969,6 +2020,7 @@ export function useRowIdsListener(
   tableId: IdOrNull,
   listener: RowIdsListener,
   listenerDeps?: React.DependencyList,
+  trackReorder?: boolean,
   mutator?: boolean,
   storeOrStoreId?: StoreOrStoreId,
 ): void;
@@ -2077,6 +2129,9 @@ export function useRowListener(
  * @param listenerDeps An optional array of dependencies for the `listener`
  * function, which, if any change, result in the re-registration of the
  * listener. This parameter defaults to an empty array.
+ * @param trackReorder Since v2.0.0, an optional boolean that indicates that the
+ * listener should be called if the set of Ids remains the same but their order
+ * changes. See the addCellIdsListener method for more details.
  * @param mutator An optional boolean that indicates that the listener mutates
  * Store data.
  * @param storeOrStoreId The Store to register the listener with: omit for the
@@ -2120,6 +2175,7 @@ export function useCellIdsListener(
   rowId: IdOrNull,
   listener: CellIdsListener,
   listenerDeps?: React.DependencyList,
+  trackReorder?: boolean,
   mutator?: boolean,
   storeOrStoreId?: StoreOrStoreId,
 ): void;
@@ -3898,307 +3954,1521 @@ export function useLinkedRowIdsListener(
 ): void;
 
 /**
- * The useCreateCheckpoints hook is used to create a Checkpoints object within a
- * React application with convenient memoization.
+ * The useCreateQueries hook is used to create a Queries object within a React
+ * application with convenient memoization.
  *
- * It is possible to create a Checkpoints object outside of the React app with
- * the regular createCheckpoints 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 Checkpoints object being created every time the app renders or
- * re-renders, the useCreateCheckpoints hook wraps the creation in a
- * memoization.
+ * 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 useCreateCheckpoints 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.
+ * 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 Checkpoints 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.
+ * 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 Checkpoints object is destroyed whenever a new one is
+ * This hook ensures the Queries object is destroyed whenever a new one is
  * created or the component is unmounted.
  *
- * @param store A reference to the Store for which to create a new Checkpoints
+ * @param store A reference to the Store for which to create a new Queries
  * object.
- * @param create A function for performing the creation steps of the Checkpoints
- * object for the Store, plus any additional steps such as adding definitions or
- * listeners, and returning it.
+ * @param create An optional callback for performing post-creation steps on the
+ * Queries object, such as adding definitions or listeners.
  * @param createDeps An optional array of dependencies for the `create`
  * function, which, if any change, result in its rerun. This parameter defaults
  * to an empty array.
- * @returns A reference to the Checkpoints object.
+ * @returns A reference to the Queries object.
  * @example
- * This example creates a Checkpoints object at the top level of a React
- * application. Even though the App component is rendered twice, the
- * Checkpoints object creation only occurs once by default.
+ * 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.
  *
  * ```jsx
  * const App = () => {
- *   const store = useCreateStore(createStore);
- *   const checkpoints = useCreateCheckpoints(store, (store) => {
- *     console.log('Checkpoints created');
- *     return createCheckpoints(store).setSize(10);
+ *   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>{JSON.stringify(checkpoints.getCheckpointIds())}</span>;
+ *   return (
+ *     <span>{queries.getResultCell('dogColors', 'fido', 'color')}</span>
+ *   );
  * };
  *
  * const app = document.createElement('div');
  * ReactDOM.render(<App />, app); // !act
- * // -> 'Checkpoints created'
+ * // -> 'Queries created'
  *
  * ReactDOM.render(<App />, app); // !act
- * // No second Checkpoints creation
+ * // No second Queries creation
  *
  * console.log(app.innerHTML);
- * // -> '<span>[[],"0",[]]</span>'
+ * // -> '<span>brown</span>'
  * ```
  * @example
- * This example creates a Checkpoints object at the top level of a React
+ * 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 useCreateCheckpoints hook takes the size prop as a
- * dependency, and so the Checkpoints object is created again on the second
- * render.
+ * 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.
  *
  * ```jsx
- * const App = ({size}) => {
- *   const store = useCreateStore(createStore);
- *   const checkpoints = useCreateCheckpoints(
- *     store,
- *     (store) => {
- *       console.log(`Checkpoints created, size ${size}`);
- *       return createCheckpoints(store).setSize(size);
- *     },
- *     [size],
+ * 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>
  *   );
- *   return <span>{JSON.stringify(checkpoints.getCheckpointIds())}</span>;
  * };
  *
  * const app = document.createElement('div');
- * ReactDOM.render(<App size={20} />, app); // !act
- * // -> 'Checkpoints created, size 20'
- *
- * console.log(app.innerHTML);
- * // -> '<span>[[],"0",[]]</span>'
+ * ReactDOM.render(<App />, app); // !act
+ * // -> 'Queries created'
  *
- * ReactDOM.render(<App size={50} />, app); // !act
- * // -> 'Checkpoints created, size 50'
+ * ReactDOM.render(<App />, app); // !act
+ * // No second Queries creation
  *
  * console.log(app.innerHTML);
- * // -> '<span>[[],"0",[]]</span>'
+ * // -> '<span>brown</span>'
  * ```
- * @category Checkpoints hooks
+ * @category Queries hooks
+ * @since v2.0.0-beta
  */
-export function useCreateCheckpoints(
+export function useCreateQueries(
   store: Store,
-  create: (store: Store) => Checkpoints,
+  create: (store: Store) => Queries,
   createDeps?: React.DependencyList,
-): Checkpoints;
+): Queries;
 
 /**
- * The useCheckpoints hook is used to get a reference to a Checkpoints object
- * from within a Provider component context.
+ * The useQueries hook is used to get a reference to a Queries object from
+ * within a Provider component context.
  *
  * A Provider component is used to wrap part of an application in a context. It
- * can contain a default Checkpoints object (or a set of Checkpoints objects
- * named by Id) that can be easily accessed without having to be passed down as
- * props through every component.
+ * 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 useCheckpoints hook lets you either get a reference to the default
- * Checkpoints object (when called without an parameter), or one of the
- * Checkpoints objects that are named by Id (when called with an Id parameter).
+ * 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).
  *
- * @param id An optional Id for accessing a Checkpoints object that was named
- * with an Id in the Provider.
- * @returns A reference to the Checkpoints object (or `undefined` if not within
- * a Provider context, or if the requested Checkpoints object does not exist)
+ * @param id An optional Id for accessing a Queries object that was named with
+ * an Id in the Provider.
+ * @returns A reference to the Queries object (or `undefined` if not within a
+ * Provider context, or if the requested Queries object does not exist)
  * @example
- * This example creates a Provider context into which a default Checkpoint
- * object is provided. A component within it then uses the useCheckpoints hook
- * to get a reference to the Checkpoints object again, without the need to have
- * it passed as a prop.
+ * 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.
  *
  * ```jsx
- * const App = ({checkpoints}) => (
- *   <Provider checkpoints={checkpoints}>
+ * const App = ({queries}) => (
+ *   <Provider queries={queries}>
  *     <Pane />
  *   </Provider>
  * );
- * const Pane = () => (
- *   <span>{useCheckpoints().getListenerStats().checkpointIds}</span>
- * );
+ * const Pane = () => <span>{useQueries().getListenerStats().table}</span>;
  *
- * const checkpoints = createCheckpoints(createStore());
+ * const queries = createQueries(createStore());
  * const app = document.createElement('div');
- * ReactDOM.render(<App checkpoints={checkpoints} />, app); // !act
+ * ReactDOM.render(<App queries={queries} />, app); // !act
  * console.log(app.innerHTML);
  * // -> '<span>0</span>'
  * ```
  * @example
- * This example creates a Provider context into which a Checkpoints object is
- * provided, named by Id. A component within it then uses the useCheckpoints
- * hook with that Id to get a reference to the Checkpoints object again, without
- * the need to have it passed as a prop.
+ * 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.
  *
  * ```jsx
- * const App = ({checkpoints}) => (
- *   <Provider checkpointsById={{petStore: checkpoints}}>
+ * const App = ({queries}) => (
+ *   <Provider queriesById={{petQueries: queries}}>
  *     <Pane />
  *   </Provider>
  * );
  * const Pane = () => (
- *   <span>
- *     {useCheckpoints('petStore').getListenerStats().checkpointIds}
- *   </span>
+ *   <span>{useQueries('petQueries').getListenerStats().table}</span>
  * );
  *
- * const checkpoints = createCheckpoints(createStore());
+ * const queries = createQueries(createStore());
  * const app = document.createElement('div');
- * ReactDOM.render(<App checkpoints={checkpoints} />, app); // !act
+ * ReactDOM.render(<App queries={queries} />, app); // !act
  * console.log(app.innerHTML);
  * // -> '<span>0</span>'
  * ```
- * @category Checkpoints hooks
+ * @category Queries hooks
  */
-export function useCheckpoints(id?: Id): Checkpoints | undefined;
+export function useQueries(id?: Id): Queries | undefined;
 
 /**
- * The useCheckpointIds hook returns an array of the checkpoint Ids being
- * managed by this Checkpoints object, and registers a listener so that any
- * changes to that result will cause a re-render.
- *
+ * The useResultTable hook returns an object containing the entire data of the
+ * result Table of the given query, and registers a listener so that any changes
+ * to that result will cause a re-render.
  *
  * A Provider component is used to wrap part of an application in a context, and
- * it can contain a default Checkpoints object or a set of Checkpoints objects
- * named by Id. The useCheckpointIds hook lets you indicate which Checkpoints
- * object to get data for: omit the optional parameter for the default context
- * Checkpoints object, provide an Id for a named context Checkpoints object, or
- * provide a Checkpoints object explicitly by reference.
+ * it can contain a default Queries object or a set of Queries objects named by
+ * Id. The useResultTable hook lets you indicate which Queries object to get
+ * data for: omit the final 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
- * checkpoint Ids will cause a re-render. When the component containing this
- * hook is unmounted, the listener will be automatically removed.
+ * query result will cause a re-render. When the component containing this hook
+ * is unmounted, the listener will be automatically removed.
  *
- * @param checkpointsOrCheckpointsId The Checkpoints object to be accessed: omit
- * for the default context Checkpoints object, provide an Id for a named context
- * Checkpoints object, or provide an explicit reference.
- * @returns A CheckpointIds array, containing the checkpoint Ids managed by this
- * Checkpoints object.
+ * @param queryId The Id of the query.
+ * @param 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 An object containing the entire data of the result Table.
  * @example
- * This example creates a Checkpoints object outside the application, which is
- * used in the useCheckpointIds hook by reference. A change to the checkpoint
- * Ids re-renders the component.
+ * This example creates a Queries object outside the application, which is used
+ * in the useTable hook by reference. A change to the data in the query
+ * re-renders the component.
  *
  * ```jsx
- * const store = createStore().setTable('pets', {fido: {species: 'dog'}});
- * const checkpoints = createCheckpoints(store);
+ * const store = createStore().setTable('pets', {
+ *   fido: {species: 'dog', color: 'brown'},
+ *   felix: {species: 'cat', color: 'black'},
+ *   cujo: {species: 'dog', color: 'black'},
+ * });
+ * const queries = createQueries(store).setQueryDefinition(
+ *   'dogColors',
+ *   'pets',
+ *   ({select, where}) => {
+ *     select('color');
+ *     where('species', 'dog');
+ *   },
+ * );
  * const App = () => (
- *   <span>{JSON.stringify(useCheckpointIds(checkpoints))}</span>
+ *   <span>{JSON.stringify(useResultTable('dogColors', queries))}</span>
  * );
  *
  * const app = document.createElement('div');
  * ReactDOM.render(<App />, app); // !act
  * console.log(app.innerHTML);
- * // -> '<span>[[],"0",[]]</span>'
- *
- * store.setCell('pets', 'fido', 'sold', true); // !act
- * console.log(app.innerHTML);
- * // -> '<span>[["0"],null,[]]</span>'
+ * // -> '<span>{"fido":{"color":"brown"},"cujo":{"color":"black"}}</span>'
  *
- * checkpoints.addCheckpoint('sale'); // !act
+ * store.setCell('pets', 'fido', 'color', 'walnut'); // !act
  * console.log(app.innerHTML);
- * // -> '<span>[["0"],"1",[]]</span>'
+ * // -> '<span>{"fido":{"color":"walnut"},"cujo":{"color":"black"}}</span>'
  * ```
  * @example
- * This example creates a Provider context into which a default Checkpoints
- * object is provided. A component within it then uses the useCheckpointIds
- * hook.
+ * This example creates a Provider context into which a default Queries object
+ * is provided. A component within it then uses the useResultTable hook.
  *
  * ```jsx
- * const App = ({checkpoints}) => (
- *   <Provider checkpoints={checkpoints}>
+ * const App = ({queries}) => (
+ *   <Provider queries={queries}>
  *     <Pane />
  *   </Provider>
  * );
- * const Pane = () => <span>{JSON.stringify(useCheckpointIds())}</span>;
- *
- * const checkpoints = createCheckpoints(
- *   createStore().setTable('pets', {fido: {species: 'dog'}}),
+ * const Pane = () => (
+ *   <span>{JSON.stringify(useResultTable('dogColors'))}</span>
  * );
  *
+ * const queries = createQueries(
+ *   createStore().setTable('pets', {
+ *     fido: {species: 'dog', color: 'brown'},
+ *     felix: {species: 'cat', color: 'black'},
+ *     cujo: {species: 'dog', color: 'black'},
+ *   }),
+ * ).setQueryDefinition('dogColors', 'pets', ({select, where}) => {
+ *   select('color');
+ *   where('species', 'dog');
+ * });
  * const app = document.createElement('div');
- * ReactDOM.render(<App checkpoints={checkpoints} />, app); // !act
+ * ReactDOM.render(<App queries={queries} />, app); // !act
  * console.log(app.innerHTML);
- * // -> '<span>[[],"0",[]]</span>'
+ * // -> '<span>{"fido":{"color":"brown"},"cujo":{"color":"black"}}</span>'
  * ```
  * @example
- * This example creates a Provider context into which a default Checkpoints
- * object is provided. A component within it then uses the useCheckpointIds
+ * This example creates a Provider context into which a Queries object is
+ * provided, named by Id. A component within it then uses the useResultTable
  * hook.
  *
  * ```jsx
- * const App = ({checkpoints}) => (
- *   <Provider checkpointsById={{petCheckpoints: checkpoints}}>
+ * const App = ({queries}) => (
+ *   <Provider queriesById={{petQueries: queries}}>
  *     <Pane />
  *   </Provider>
  * );
  * const Pane = () => (
- *   <span>{JSON.stringify(useCheckpointIds('petCheckpoints'))}</span>
- * );
- *
- * const checkpoints = createCheckpoints(
- *   createStore().setTable('pets', {fido: {species: 'dog'}}),
+ *   <span>{JSON.stringify(useResultTable('dogColors', 'petQueries'))}</span>
  * );
  *
+ * const queries = createQueries(
+ *   createStore().setTable('pets', {
+ *     fido: {species: 'dog', color: 'brown'},
+ *     felix: {species: 'cat', color: 'black'},
+ *     cujo: {species: 'dog', color: 'black'},
+ *   }),
+ * ).setQueryDefinition('dogColors', 'pets', ({select, where}) => {
+ *   select('color');
+ *   where('species', 'dog');
+ * });
  * const app = document.createElement('div');
- * ReactDOM.render(<App checkpoints={checkpoints} />, app); // !act
+ * ReactDOM.render(<App queries={queries} />, app); // !act
  * console.log(app.innerHTML);
- * // -> '<span>[[],"0",[]]</span>'
+ * // -> '<span>{"fido":{"color":"brown"},"cujo":{"color":"black"}}</span>'
  * ```
- * @category Checkpoints hooks
+ * @category Queries hooks
  */
-export function useCheckpointIds(
-  checkpointsOrCheckpointsId?: CheckpointsOrCheckpointsId,
-): CheckpointIds;
+export function useResultTable(
+  queryId: Id,
+  queriesOrQueriesId?: QueriesOrQueriesId,
+): Table;
 
 /**
- * The useCheckpoint hook returns the label for a checkpoint, and registers a
- * listener so that any changes to that result will cause a re-render.
+ * The useResultRowIds hook returns the Ids of every Row in the result Table of
+ * the given query, and registers a listener so that any changes to those Ids
+ * will cause a re-render.
  *
  * A Provider component is used to wrap part of an application in a context, and
- * it can contain a default Checkpoints object or a set of Checkpoints objects
- * named by Id. The useCheckpoint hook lets you indicate which Checkpoints
- * object to get data for: omit the optional final parameter for the default
- * context Checkpoints object, provide an Id for a named context Checkpoints
- * object, or provide a Checkpoints object explicitly by reference.
+ * it can contain a default Queries object or a set of Queries objects named by
+ * Id. The useResultRowIds hook lets you indicate which Queries object to get
+ * data for: omit the final 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
- * label will cause a re-render. When the component containing this hook is
- * unmounted, the listener will be automatically removed.
+ * result Row Ids will cause a re-render. When the component containing this
+ * hook is unmounted, the listener will be automatically removed.
  *
- * @param checkpointId The Id of the checkpoint.
- * @param checkpointsOrCheckpointsId The Checkpoints object to be accessed: omit
- * for the default context Checkpoints object, provide an Id for a named context
- * Checkpoints object, or provide an explicit reference.
- * @returns A string label for the requested checkpoint, an empty string if it
- * was never set, or `undefined` if the checkpoint does not exist.
+ * @param queryId The Id of the query.
+ * @param 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.
+ * @param trackReorder An optional boolean that indicates that the listener
+ * should be called if the set of Ids remains the same but their order changes.
+ * See the addResultRowIdsListener method for more details.
+ * @returns An array of the Ids of every Row in the result of the query.
  * @example
- * This example creates a Checkpoints object outside the application, which is
- * used in the useCheckpoint hook by reference. A change to the checkpoint label
+ * This example creates a Queries object outside the application, which is used
+ * in the useResultRowIds hook by reference. A change to the data in the query
  * re-renders the component.
  *
  * ```jsx
- * const store = createStore().setTable('pets', {fido: {species: 'dog'}});
- * const checkpoints = createCheckpoints(store);
- * const App = () => <span>{useCheckpoint('1', checkpoints)}</span>;
+ * const store = createStore().setTable('pets', {
+ *   fido: {species: 'dog', color: 'brown'},
+ *   felix: {species: 'cat', color: 'black'},
+ *   cujo: {species: 'dog', color: 'black'},
+ * });
+ * const queries = createQueries(store).setQueryDefinition(
+ *   'dogColors',
+ *   'pets',
+ *   ({select, where}) => {
+ *     select('color');
+ *     where('species', 'dog');
+ *   },
+ * );
+ * const App = () => (
+ *   <span>{JSON.stringify(useResultRowIds('dogColors', queries))}</span>
+ * );
  *
  * const app = document.createElement('div');
  * ReactDOM.render(<App />, app); // !act
  * console.log(app.innerHTML);
- * // -> '<span></span>'
+ * // -> '<span>["fido","cujo"]</span>'
  *
- * store.setCell('pets', 'fido', 'sold', true); // !act
+ * store.setCell('pets', 'cujo', 'species', 'wolf'); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>["fido"]</span>'
+ * ```
+ * @example
+ * This example creates a Provider context into which a default Queries object
+ * is provided. A component within it then uses the useResultRowIds hook.
+ *
+ * ```jsx
+ * const App = ({queries}) => (
+ *   <Provider queries={queries}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => (
+ *   <span>{JSON.stringify(useResultRowIds('dogColors'))}</span>
+ * );
+ *
+ * const queries = createQueries(
+ *   createStore().setTable('pets', {
+ *     fido: {species: 'dog', color: 'brown'},
+ *     felix: {species: 'cat', color: 'black'},
+ *     cujo: {species: 'dog', color: 'black'},
+ *   }),
+ * ).setQueryDefinition('dogColors', 'pets', ({select, where}) => {
+ *   select('color');
+ *   where('species', 'dog');
+ * });
+ * const app = document.createElement('div');
+ * ReactDOM.render(<App queries={queries} />, app); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>["fido","cujo"]</span>'
+ * ```
+ * @example
+ * This example creates a Provider context into which a Queries object is
+ * provided, named by Id. A component within it then uses the useResultRowIds
+ * hook.
+ *
+ * ```jsx
+ * const App = ({queries}) => (
+ *   <Provider queriesById={{petQueries: queries}}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => (
+ *   <span>{JSON.stringify(useResultRowIds('dogColors', 'petQueries'))}</span>
+ * );
+ *
+ * const queries = createQueries(
+ *   createStore().setTable('pets', {
+ *     fido: {species: 'dog', color: 'brown'},
+ *     felix: {species: 'cat', color: 'black'},
+ *     cujo: {species: 'dog', color: 'black'},
+ *   }),
+ * ).setQueryDefinition('dogColors', 'pets', ({select, where}) => {
+ *   select('color');
+ *   where('species', 'dog');
+ * });
+ * const app = document.createElement('div');
+ * ReactDOM.render(<App queries={queries} />, app); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>["fido","cujo"]</span>'
+ * ```
+ * @category Queries hooks
+ */
+export function useResultRowIds(
+  queryId: Id,
+  queriesOrQueriesId?: QueriesOrQueriesId,
+  trackReorder?: boolean,
+): Ids;
+
+/**
+ * The useResultRow hook returns an object containing the entire data of a
+ * single Row in the result Table of the given query, and registers a listener
+ * so that any changes to that Row will cause a re-render.
+ *
+ * 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 useResultRow hook lets you indicate which Queries object to get data
+ * for: omit the final 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
+ * result Row will cause a re-render. When the component containing this hook is
+ * unmounted, the listener will be automatically removed.
+ *
+ * @param queryId The Id of the query.
+ * @param rowId The Id of the Row in the result Table.
+ * @param 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 An object containing the entire data of the Row in the result Table
+ * of the query.
+ * @example
+ * This example creates a Queries object outside the application, which is used
+ * in the useResultRow hook by reference. A change to the data in the query
+ * re-renders the component.
+ *
+ * ```jsx
+ * const store = createStore().setTable('pets', {
+ *   fido: {species: 'dog', color: 'brown'},
+ *   felix: {species: 'cat', color: 'black'},
+ *   cujo: {species: 'dog', color: 'black'},
+ * });
+ * const queries = createQueries(store).setQueryDefinition(
+ *   'dogColors',
+ *   'pets',
+ *   ({select, where}) => {
+ *     select('color');
+ *     where('species', 'dog');
+ *   },
+ * );
+ * const App = () => (
+ *   <span>{JSON.stringify(useResultRow('dogColors', 'fido', queries))}</span>
+ * );
+ *
+ * const app = document.createElement('div');
+ * ReactDOM.render(<App />, app); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>{"color":"brown"}</span>'
+ *
+ * store.setCell('pets', 'fido', 'color', 'walnut'); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>{"color":"walnut"}</span>'
+ * ```
+ * @example
+ * This example creates a Provider context into which a default Queries object
+ * is provided. A component within it then uses the useResultRow hook.
+ *
+ * ```jsx
+ * const App = ({queries}) => (
+ *   <Provider queries={queries}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => (
+ *   <span>{JSON.stringify(useResultRow('dogColors', 'fido'))}</span>
+ * );
+ *
+ * const queries = createQueries(
+ *   createStore().setTable('pets', {
+ *     fido: {species: 'dog', color: 'brown'},
+ *     felix: {species: 'cat', color: 'black'},
+ *     cujo: {species: 'dog', color: 'black'},
+ *   }),
+ * ).setQueryDefinition('dogColors', 'pets', ({select, where}) => {
+ *   select('color');
+ *   where('species', 'dog');
+ * });
+ * const app = document.createElement('div');
+ * ReactDOM.render(<App queries={queries} />, app); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>{"color":"brown"}</span>'
+ * ```
+ * @example
+ * This example creates a Provider context into which a Queries object is
+ * provided, named by Id. A component within it then uses the useResultRow
+ * hook.
+ *
+ * ```jsx
+ * const App = ({queries}) => (
+ *   <Provider queriesById={{petQueries: queries}}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => (
+ *   <span>
+ *     {JSON.stringify(useResultRow('dogColors', 'fido', 'petQueries'))}
+ *   </span>
+ * );
+ *
+ * const queries = createQueries(
+ *   createStore().setTable('pets', {
+ *     fido: {species: 'dog', color: 'brown'},
+ *     felix: {species: 'cat', color: 'black'},
+ *     cujo: {species: 'dog', color: 'black'},
+ *   }),
+ * ).setQueryDefinition('dogColors', 'pets', ({select, where}) => {
+ *   select('color');
+ *   where('species', 'dog');
+ * });
+ * const app = document.createElement('div');
+ * ReactDOM.render(<App queries={queries} />, app); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>{"color":"brown"}</span>'
+ * ```
+ * @category Queries hooks
+ */
+export function useResultRow(
+  queryId: Id,
+  rowId: Id,
+  queriesOrQueriesId?: QueriesOrQueriesId,
+): Row;
+
+/**
+ * The useResultCellIds hook returns the Ids of every Cell in a given Row in the
+ * result Table of the given query, and registers a listener so that any changes
+ * to those Ids will cause a re-render.
+ *
+ * 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 useResultCellIds hook lets you indicate which Queries object to get
+ * data for: omit the final 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
+ * result Cell Ids will cause a re-render. When the component containing this
+ * hook is unmounted, the listener will be automatically removed.
+ *
+ * @param queryId The Id of the query.
+ * @param rowId The Id of the Row in the result Table.
+ * @param 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 An array of the Ids of every Cell in the Row in the result of the
+ * query.
+ * @example
+ * This example creates a Queries object outside the application, which is used
+ * in the useResultCellIds hook by reference. A change to the data in the query
+ * re-renders the component.
+ *
+ * ```jsx
+ * const store = createStore().setTable('pets', {
+ *   fido: {species: 'dog', color: 'brown'},
+ *   felix: {species: 'cat', color: 'black'},
+ *   cujo: {species: 'dog', color: 'black'},
+ * });
+ * const queries = createQueries(store).setQueryDefinition(
+ *   'dogColors',
+ *   'pets',
+ *   ({select, where}) => {
+ *     select('species');
+ *     select('color');
+ *     select('legs');
+ *     where('species', 'dog');
+ *   },
+ * );
+ * const App = () => (
+ *   <span>
+ *     {JSON.stringify(useResultCellIds('dogColors', 'fido', queries))}
+ *   </span>
+ * );
+ *
+ * const app = document.createElement('div');
+ * ReactDOM.render(<App />, app); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>["species","color"]</span>'
+ *
+ * store.setCell('pets', 'fido', 'legs', 4); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>["species","color","legs"]</span>'
+ * ```
+ * @example
+ * This example creates a Provider context into which a default Queries object
+ * is provided. A component within it then uses the useResultCellIds hook.
+ *
+ * ```jsx
+ * const App = ({queries}) => (
+ *   <Provider queries={queries}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => (
+ *   <span>{JSON.stringify(useResultCellIds('dogColors', 'fido'))}</span>
+ * );
+ *
+ * const queries = createQueries(
+ *   createStore().setTable('pets', {
+ *     fido: {species: 'dog', color: 'brown'},
+ *     felix: {species: 'cat', color: 'black'},
+ *     cujo: {species: 'dog', color: 'black'},
+ *   }),
+ * ).setQueryDefinition('dogColors', 'pets', ({select, where}) => {
+ *   select('species');
+ *   select('color');
+ *   where('species', 'dog');
+ * });
+ * const app = document.createElement('div');
+ * ReactDOM.render(<App queries={queries} />, app); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>["species","color"]</span>'
+ * ```
+ * @example
+ * This example creates a Provider context into which a Queries object is
+ * provided, named by Id. A component within it then uses the useResultCellIds
+ * hook.
+ *
+ * ```jsx
+ * const App = ({queries}) => (
+ *   <Provider queriesById={{petQueries: queries}}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => (
+ *   <span>
+ *     {JSON.stringify(useResultCellIds('dogColors', 'fido', 'petQueries'))}
+ *   </span>
+ * );
+ *
+ * const queries = createQueries(
+ *   createStore().setTable('pets', {
+ *     fido: {species: 'dog', color: 'brown'},
+ *     felix: {species: 'cat', color: 'black'},
+ *     cujo: {species: 'dog', color: 'black'},
+ *   }),
+ * ).setQueryDefinition('dogColors', 'pets', ({select, where}) => {
+ *   select('species');
+ *   select('color');
+ *   where('species', 'dog');
+ * });
+ * const app = document.createElement('div');
+ * ReactDOM.render(<App queries={queries} />, app); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>["species","color"]</span>'
+ * ```
+ * @category Queries hooks
+ */
+export function useResultCellIds(
+  queryId: Id,
+  rowId: Id,
+  queriesOrQueriesId?: QueriesOrQueriesId,
+): Ids;
+
+/**
+ * The useResultCell hook returns the value of a single Cell in a given Row in
+ * the result Table of the given query, and registers a listener so that any
+ * changes to that value will cause a re-render.
+ *
+ * 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 useResultCell hook lets you indicate which Queries object to get data
+ * for: omit the final 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
+ * result Cell will cause a re-render. When the component containing this hook
+ * is unmounted, the listener will be automatically removed.
+ *
+ * @param queryId The Id of the query.
+ * @param rowId The Id of the Row in the result Table.
+ * @param cellId The Id of the Cell in the Row.
+ * @param 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 The value of the Cell, or `undefined`.
+ * @example
+ * This example creates a Queries object outside the application, which is used
+ * in the useResultCell hook by reference. A change to the data in the query
+ * re-renders the component.
+ *
+ * ```jsx
+ * const store = createStore().setTable('pets', {
+ *   fido: {species: 'dog', color: 'brown'},
+ *   felix: {species: 'cat', color: 'black'},
+ *   cujo: {species: 'dog', color: 'black'},
+ * });
+ * const queries = createQueries(store).setQueryDefinition(
+ *   'dogColors',
+ *   'pets',
+ *   ({select, where}) => {
+ *     select('species');
+ *     select('color');
+ *     select('legs');
+ *     where('species', 'dog');
+ *   },
+ * );
+ * const App = () => (
+ *   <span>{useResultCell('dogColors', 'fido', 'color', queries)}</span>
+ * );
+ *
+ * const app = document.createElement('div');
+ * ReactDOM.render(<App />, app); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>brown</span>'
+ *
+ * store.setCell('pets', 'fido', 'color', 'walnut'); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>walnut</span>'
+ * ```
+ * @example
+ * This example creates a Provider context into which a default Queries object
+ * is provided. A component within it then uses the useResultCell hook.
+ *
+ * ```jsx
+ * const App = ({queries}) => (
+ *   <Provider queries={queries}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => (
+ *   <span>{useResultCell('dogColors', 'fido', 'color')}</span>
+ * );
+ *
+ * const queries = createQueries(
+ *   createStore().setTable('pets', {
+ *     fido: {species: 'dog', color: 'brown'},
+ *     felix: {species: 'cat', color: 'black'},
+ *     cujo: {species: 'dog', color: 'black'},
+ *   }),
+ * ).setQueryDefinition('dogColors', 'pets', ({select, where}) => {
+ *   select('species');
+ *   select('color');
+ *   where('species', 'dog');
+ * });
+ * const app = document.createElement('div');
+ * ReactDOM.render(<App queries={queries} />, app); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>brown</span>'
+ * ```
+ * @example
+ * This example creates a Provider context into which a Queries object is
+ * provided, named by Id. A component within it then uses the useResultCell
+ * hook.
+ *
+ * ```jsx
+ * const App = ({queries}) => (
+ *   <Provider queriesById={{petQueries: queries}}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => (
+ *   <span>{useResultCell('dogColors', 'fido', 'color', 'petQueries')}</span>
+ * );
+ *
+ * const queries = createQueries(
+ *   createStore().setTable('pets', {
+ *     fido: {species: 'dog', color: 'brown'},
+ *     felix: {species: 'cat', color: 'black'},
+ *     cujo: {species: 'dog', color: 'black'},
+ *   }),
+ * ).setQueryDefinition('dogColors', 'pets', ({select, where}) => {
+ *   select('species');
+ *   select('color');
+ *   where('species', 'dog');
+ * });
+ * const app = document.createElement('div');
+ * ReactDOM.render(<App queries={queries} />, app); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>brown</span>'
+ * ```
+ * @category Queries hooks
+ */
+export function useResultCell(
+  queryId: Id,
+  rowId: Id,
+  cellId: Id,
+  queriesOrQueriesId?: QueriesOrQueriesId,
+): Cell | undefined;
+
+/**
+ * The useResultTableListener hook registers a listener function with a Queries
+ * object that will be called whenever data in a result Table changes.
+ *
+ * This hook is useful for situations where a component needs to register its
+ * own specific listener to do more than simply tracking the value (which is
+ * more easily done with the useResultTable hook).
+ *
+ * You can either listen to a single result Table (by specifying a query Id as
+ * the method's first parameter) or changes to any result Table (by providing a
+ * `null` wildcard).
+ *
+ * Unlike the addResultTableListener method, which returns a listener Id and
+ * requires you to remove it manually, the useResultTableListener hook manages
+ * this lifecycle for you: when the listener changes (per its `listenerDeps`
+ * dependencies) or the component unmounts, the listener on the underlying
+ * Queries object will be deleted.
+ *
+ * @param queryId The Id of the query to listen to, or `null` as a wildcard.
+ * @param listener The function that will be called whenever data in the
+ * matching result Table changes.
+ * @param listenerDeps An optional array of dependencies for the `listener`
+ * function, which, if any change, result in the re-registration of the
+ * listener. This parameter defaults to an empty array.
+ * @param queriesOrQueriesId The Queries object to register the listener with:
+ * omit for the default context Queries object, provide an Id for a named
+ * context Queries object, or provide an explicit reference.
+ * @example
+ * This example uses the useResultTableListener hook to create a listener that
+ * is scoped to a single component. When the component is unmounted, the
+ * listener is removed from the Queries object.
+ *
+ * ```jsx
+ * const App = ({queries}) => (
+ *   <Provider queries={queries}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => {
+ *   useResultTableListener('petColors', () =>
+ *     console.log('Result table changed'),
+ *   );
+ *   return <span>App</span>;
+ * };
+ *
+ * const store = createStore().setTable('pets', {
+ *   fido: {species: 'dog', color: 'brown'},
+ *   felix: {species: 'cat', color: 'black'},
+ *   cujo: {species: 'dog', color: 'black'},
+ * });
+ * const queries = createQueries(store).setQueryDefinition(
+ *   'petColors',
+ *   'pets',
+ *   ({select}) => select('color'),
+ * );
+ * const app = document.createElement('div');
+ * ReactDOM.render(<App queries={queries} />, app); // !act
+ * console.log(queries.getListenerStats().table);
+ * // -> 1
+ *
+ * store.setCell('pets', 'fido', 'color', 'walnut'); // !act
+ * // -> 'Result table changed'
+ *
+ * ReactDOM.unmountComponentAtNode(app); // !act
+ * console.log(queries.getListenerStats().table);
+ * // -> 0
+ * ```
+ * @category Queries hooks
+ */
+export function useResultTableListener(
+  queryId: IdOrNull,
+  listener: ResultTableListener,
+  listenerDeps?: React.DependencyList,
+  queriesOrQueriesId?: QueriesOrQueriesId,
+): void;
+
+/**
+ * The useResultRowIdsListener hook registers a listener function with a Queries
+ * object that will be called whenever the Row Ids in a result Table change.
+ *
+ * This hook is useful for situations where a component needs to register its
+ * own specific listener to do more than simply tracking the value (which is
+ * more easily done with the useResultRowIds hook).
+ *
+ * You can either listen to a single result Table (by specifying a query Id as
+ * the method's first parameter) or changes to any result Table (by providing a
+ * `null` wildcard).
+ *
+ * Unlike the addResultRowIdsListener method, which returns a listener Id and
+ * requires you to remove it manually, the useResultRowIdsListener hook manages
+ * this lifecycle for you: when the listener changes (per its `listenerDeps`
+ * dependencies) or the component unmounts, the listener on the underlying
+ * Queries object will be deleted.
+ *
+ * @param queryId The Id of the query to listen to, or `null` as a wildcard.
+ * @param listener The function that will be called whenever the Row Ids in the
+ * matching result Table change.
+ * @param listenerDeps An optional array of dependencies for the `listener`
+ * function, which, if any change, result in the re-registration of the
+ * listener. This parameter defaults to an empty array.
+ * @param trackReorder An optional boolean that indicates that the listener
+ * should be called if the set of Ids remains the same but their order changes.
+ * See the addResultRowIdsListener method for more details.
+ * @param queriesOrQueriesId The Queries object to register the listener with:
+ * omit for the default context Queries object, provide an Id for a named
+ * context Queries object, or provide an explicit reference.
+ * @example
+ * This example uses the useResultRowIdsListener hook to create a listener that
+ * is scoped to a single component. When the component is unmounted, the
+ * listener is removed from the Queries object.
+ *
+ * ```jsx
+ * const App = ({queries}) => (
+ *   <Provider queries={queries}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => {
+ *   useResultRowIdsListener('petColors', () =>
+ *     console.log('Result row Ids changed'),
+ *   );
+ *   return <span>App</span>;
+ * };
+ *
+ * const store = createStore().setTable('pets', {
+ *   fido: {species: 'dog', color: 'brown'},
+ *   felix: {species: 'cat', color: 'black'},
+ *   cujo: {species: 'dog', color: 'black'},
+ * });
+ * const queries = createQueries(store).setQueryDefinition(
+ *   'petColors',
+ *   'pets',
+ *   ({select}) => select('color'),
+ * );
+ * const app = document.createElement('div');
+ * ReactDOM.render(<App queries={queries} />, app); // !act
+ * console.log(queries.getListenerStats().rowIds);
+ * // -> 1
+ *
+ * store.setRow('pets', 'rex', {species: 'dog', color: 'tan'}); // !act
+ * // -> 'Result row Ids changed'
+ *
+ * ReactDOM.unmountComponentAtNode(app); // !act
+ * console.log(queries.getListenerStats().rowIds);
+ * // -> 0
+ * ```
+ * @category Queries hooks
+ */
+export function useResultRowIdsListener(
+  queryId: IdOrNull,
+  listener: ResultRowIdsListener,
+  listenerDeps?: React.DependencyList,
+  trackReorder?: boolean,
+  queriesOrQueriesId?: QueriesOrQueriesId,
+): void;
+
+/**
+ * The useResultRowListener hook registers a listener function with a Queries
+ * object that will be called whenever data in a result Row changes.
+ *
+ * This hook is useful for situations where a component needs to register its
+ * own specific listener to do more than simply tracking the value (which is
+ * more easily done with the useResultRow hook).
+ *
+ * You can either listen to a single result Row (by specifying a query Id and
+ * Row Id as the method's first two parameters) or changes to any result Row (by
+ * providing `null` wildcards).
+ *
+ * Both, either, or neither of the `queryId` and `rowId` parameters can be
+ * wildcarded with `null`. You can listen to a specific result Row in a specific
+ * query, any result Row in a specific query, a specific result Row in any
+ * query, or any result Row in any query.
+ *
+ * Unlike the addResultRowListener method, which returns a listener Id and
+ * requires you to remove it manually, the useResultRowListener hook manages
+ * this lifecycle for you: when the listener changes (per its `listenerDeps`
+ * dependencies) or the component unmounts, the listener on the underlying
+ * Queries object will be deleted.
+ *
+ * @param queryId The Id of the query to listen to, or `null` as a wildcard.
+ * @param rowId The Id of the result Row to listen to, or `null` as a wildcard.
+ * @param listener The function that will be called whenever data in the
+ * matching result Row changes.
+ * @param listenerDeps An optional array of dependencies for the `listener`
+ * function, which, if any change, result in the re-registration of the
+ * listener. This parameter defaults to an empty array.
+ * @param queriesOrQueriesId The Queries object to register the listener with:
+ * omit for the default context Queries object, provide an Id for a named
+ * context Queries object, or provide an explicit reference.
+ * @example
+ * This example uses the useResultRowListener hook to create a listener that
+ * is scoped to a single component. When the component is unmounted, the
+ * listener is removed from the Queries object.
+ *
+ * ```jsx
+ * const App = ({queries}) => (
+ *   <Provider queries={queries}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => {
+ *   useResultRowListener('petColors', 'fido', () =>
+ *     console.log('Result row changed'),
+ *   );
+ *   return <span>App</span>;
+ * };
+ *
+ * const store = createStore().setTable('pets', {
+ *   fido: {species: 'dog', color: 'brown'},
+ *   felix: {species: 'cat', color: 'black'},
+ *   cujo: {species: 'dog', color: 'black'},
+ * });
+ * const queries = createQueries(store).setQueryDefinition(
+ *   'petColors',
+ *   'pets',
+ *   ({select}) => select('color'),
+ * );
+ * const app = document.createElement('div');
+ * ReactDOM.render(<App queries={queries} />, app); // !act
+ * console.log(queries.getListenerStats().row);
+ * // -> 1
+ *
+ * store.setCell('pets', 'fido', 'color', 'walnut'); // !act
+ * // -> 'Result row changed'
+ *
+ * ReactDOM.unmountComponentAtNode(app); // !act
+ * console.log(queries.getListenerStats().row);
+ * // -> 0
+ * ```
+ * @category Queries hooks
+ */
+export function useResultRowListener(
+  queryId: IdOrNull,
+  rowId: IdOrNull,
+  listener: ResultRowListener,
+  listenerDeps?: React.DependencyList,
+  queriesOrQueriesId?: QueriesOrQueriesId,
+): void;
+
+/**
+ * The useResultCellIdsListener hook registers a listener function with a
+ * Queries object that will be called whenever the Cell Ids in a result Row
+ * change.
+ *
+ * This hook is useful for situations where a component needs to register its
+ * own specific listener to do more than simply tracking the value (which is
+ * more easily done with the useResultCellIds hook).
+ *
+ * Both, either, or neither of the `queryId` and `rowId` parameters can be
+ * wildcarded with `null`. You can listen to a specific result Row in a specific
+ * query, any result Row in a specific query, a specific result Row in any
+ * query, or any result Row in any query.
+ *
+ * Unlike the addResultCellIdsListener method, which returns a listener Id and
+ * requires you to remove it manually, the useResultCellIdsListener hook manages
+ * this lifecycle for you: when the listener changes (per its `listenerDeps`
+ * dependencies) or the component unmounts, the listener on the underlying
+ * Queries object will be deleted.
+ *
+ * @param queryId The Id of the query to listen to, or `null` as a wildcard.
+ * @param rowId The Id of the result Row to listen to, or `null` as a wildcard.
+ * @param listener The function that will be called whenever the Row Ids in the
+ * matching result Table change.
+ * @param listenerDeps An optional array of dependencies for the `listener`
+ * function, which, if any change, result in the re-registration of the
+ * listener. This parameter defaults to an empty array.
+ * @param queriesOrQueriesId The Queries object to register the listener with:
+ * omit for the default context Queries object, provide an Id for a named
+ * context Queries object, or provide an explicit reference.
+ * @example
+ * This example uses the useResultCellIdsListener hook to create a listener that
+ * is scoped to a single component. When the component is unmounted, the
+ * listener is removed from the Queries object.
+ *
+ * ```jsx
+ * const App = ({queries}) => (
+ *   <Provider queries={queries}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => {
+ *   useResultCellIdsListener('petColors', 'fido', () =>
+ *     console.log('Result cell Ids changed'),
+ *   );
+ *   return <span>App</span>;
+ * };
+ *
+ * const store = createStore().setTable('pets', {
+ *   fido: {species: 'dog', color: 'brown'},
+ *   felix: {species: 'cat', color: 'black'},
+ *   cujo: {species: 'dog', color: 'black'},
+ * });
+ * const queries = createQueries(store).setQueryDefinition(
+ *   'petColors',
+ *   'pets',
+ *   ({select, where}) => {
+ *     select('color');
+ *     select('legs');
+ *   },
+ * );
+ * const app = document.createElement('div');
+ * ReactDOM.render(<App queries={queries} />, app); // !act
+ * console.log(queries.getListenerStats().cellIds);
+ * // -> 1
+ *
+ * store.setCell('pets', 'fido', 'legs', 4); // !act
+ * // -> 'Result cell Ids changed'
+ *
+ * ReactDOM.unmountComponentAtNode(app); // !act
+ * console.log(queries.getListenerStats().cellIds);
+ * // -> 0
+ * ```
+ * @category Queries hooks
+ */
+export function useResultCellIdsListener(
+  queryId: IdOrNull,
+  rowId: IdOrNull,
+  listener: ResultCellIdsListener,
+  listenerDeps?: React.DependencyList,
+  queriesOrQueriesId?: QueriesOrQueriesId,
+): void;
+
+/**
+ * The useResultCellListener hook registers a listener function with a Queries
+ * object that will be called whenever data in a Cell changes.
+ *
+ * This hook is useful for situations where a component needs to register its
+ * own specific listener to do more than simply tracking the value (which is
+ * more easily done with the useResultCell hook).
+ *
+ * You can either listen to a single Cell (by specifying the Table Id, Row Id,
+ * and Cell Id as the method's first three parameters) or changes to any Cell
+ * (by providing `null` wildcards).
+ *
+ * All, some, or none of the `queryId`, `rowId`, and `cellId` parameters can be
+ * wildcarded with `null`. You can listen to a specific Cell in a specific
+ * result Row in a specific query, any Cell in any result Row in any query, for
+ * example - or every other combination of wildcards.
+ *
+ * Unlike the addResultCellListener method, which returns a listener Id and
+ * requires you to remove it manually, the useResultCellListener hook manages
+ * this lifecycle for you: when the listener changes (per its `listenerDeps`
+ * dependencies) or the component unmounts, the listener on the underlying
+ * Queries object will be deleted.
+ *
+ * @param queryId The Id of the query to listen to, or `null` as a wildcard.
+ * @param rowId The Id of the result Row to listen to, or `null` as a wildcard.
+ * @param cellId The Id of the result Cell to listen to, or `null` as a
+ * wildcard.
+ * @param listener The function that will be called whenever data in the
+ * matching result Cell changes.
+ * @param listenerDeps An optional array of dependencies for the `listener`
+ * function, which, if any change, result in the re-registration of the
+ * listener. This parameter defaults to an empty array.
+ * @param queriesOrQueriesId The Queries object to register the listener with:
+ * omit for the default context Queries object, provide an Id for a named
+ * context Queries object, or provide an explicit reference.
+ * @example
+ * This example uses the useResultCellListener hook to create a listener that
+ * is scoped to a single component. When the component is unmounted, the
+ * listener is removed from the Queries object.
+ *
+ * ```jsx
+ * const App = ({queries}) => (
+ *   <Provider queries={queries}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => {
+ *   useResultCellListener('petColors', 'fido', 'color', () =>
+ *     console.log('Result cell changed'),
+ *   );
+ *   return <span>App</span>;
+ * };
+ *
+ * const store = createStore().setTable('pets', {
+ *   fido: {species: 'dog', color: 'brown'},
+ *   felix: {species: 'cat', color: 'black'},
+ *   cujo: {species: 'dog', color: 'black'},
+ * });
+ * const queries = createQueries(store).setQueryDefinition(
+ *   'petColors',
+ *   'pets',
+ *   ({select}) => select('color'),
+ * );
+ * const app = document.createElement('div');
+ * ReactDOM.render(<App queries={queries} />, app); // !act
+ * console.log(queries.getListenerStats().cell);
+ * // -> 1
+ *
+ * store.setCell('pets', 'fido', 'color', 'walnut'); // !act
+ * // -> 'Result cell changed'
+ *
+ * ReactDOM.unmountComponentAtNode(app); // !act
+ * console.log(queries.getListenerStats().cell);
+ * // -> 0
+ * ```
+ * @category Queries hooks
+ */
+export function useResultCellListener(
+  queryId: IdOrNull,
+  rowId: IdOrNull,
+  cellId: IdOrNull,
+  listener: ResultCellListener,
+  listenerDeps?: React.DependencyList,
+  queriesOrQueriesId?: QueriesOrQueriesId,
+): void;
+
+/**
+ * The useCreateCheckpoints hook is used to create a Checkpoints object within a
+ * React application with convenient memoization.
+ *
+ * It is possible to create a Checkpoints object outside of the React app with
+ * the regular createCheckpoints 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 Checkpoints object being created every time the app renders or
+ * re-renders, the useCreateCheckpoints hook wraps the creation in a
+ * memoization.
+ *
+ * The useCreateCheckpoints 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 Checkpoints 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 Checkpoints object is destroyed whenever a new one is
+ * created or the component is unmounted.
+ *
+ * @param store A reference to the Store for which to create a new Checkpoints
+ * object.
+ * @param create A function for performing the creation steps of the Checkpoints
+ * object for the Store, plus any additional steps such as adding definitions or
+ * listeners, and returning it.
+ * @param createDeps An optional array of dependencies for the `create`
+ * function, which, if any change, result in its rerun. This parameter defaults
+ * to an empty array.
+ * @returns A reference to the Checkpoints object.
+ * @example
+ * This example creates a Checkpoints object at the top level of a React
+ * application. Even though the App component is rendered twice, the
+ * Checkpoints object creation only occurs once by default.
+ *
+ * ```jsx
+ * const App = () => {
+ *   const store = useCreateStore(createStore);
+ *   const checkpoints = useCreateCheckpoints(store, (store) => {
+ *     console.log('Checkpoints created');
+ *     return createCheckpoints(store).setSize(10);
+ *   });
+ *   return <span>{JSON.stringify(checkpoints.getCheckpointIds())}</span>;
+ * };
+ *
+ * const app = document.createElement('div');
+ * ReactDOM.render(<App />, app); // !act
+ * // -> 'Checkpoints created'
+ *
+ * ReactDOM.render(<App />, app); // !act
+ * // No second Checkpoints creation
+ *
+ * console.log(app.innerHTML);
+ * // -> '<span>[[],"0",[]]</span>'
+ * ```
+ * @example
+ * This example creates a Checkpoints object at the top level of a React
+ * application. The App component is rendered twice, each with a different
+ * top-level prop. The useCreateCheckpoints hook takes the size prop as a
+ * dependency, and so the Checkpoints object is created again on the second
+ * render.
+ *
+ * ```jsx
+ * const App = ({size}) => {
+ *   const store = useCreateStore(createStore);
+ *   const checkpoints = useCreateCheckpoints(
+ *     store,
+ *     (store) => {
+ *       console.log(`Checkpoints created, size ${size}`);
+ *       return createCheckpoints(store).setSize(size);
+ *     },
+ *     [size],
+ *   );
+ *   return <span>{JSON.stringify(checkpoints.getCheckpointIds())}</span>;
+ * };
+ *
+ * const app = document.createElement('div');
+ * ReactDOM.render(<App size={20} />, app); // !act
+ * // -> 'Checkpoints created, size 20'
+ *
+ * console.log(app.innerHTML);
+ * // -> '<span>[[],"0",[]]</span>'
+ *
+ * ReactDOM.render(<App size={50} />, app); // !act
+ * // -> 'Checkpoints created, size 50'
+ *
+ * console.log(app.innerHTML);
+ * // -> '<span>[[],"0",[]]</span>'
+ * ```
+ * @category Checkpoints hooks
+ */
+export function useCreateCheckpoints(
+  store: Store,
+  create: (store: Store) => Checkpoints,
+  createDeps?: React.DependencyList,
+): Checkpoints;
+
+/**
+ * The useCheckpoints hook is used to get a reference to a Checkpoints object
+ * from within a Provider component context.
+ *
+ * A Provider component is used to wrap part of an application in a context. It
+ * can contain a default Checkpoints object (or a set of Checkpoints objects
+ * named by Id) that can be easily accessed without having to be passed down as
+ * props through every component.
+ *
+ * The useCheckpoints hook lets you either get a reference to the default
+ * Checkpoints object (when called without an parameter), or one of the
+ * Checkpoints objects that are named by Id (when called with an Id parameter).
+ *
+ * @param id An optional Id for accessing a Checkpoints object that was named
+ * with an Id in the Provider.
+ * @returns A reference to the Checkpoints object (or `undefined` if not within
+ * a Provider context, or if the requested Checkpoints object does not exist)
+ * @example
+ * This example creates a Provider context into which a default Checkpoint
+ * object is provided. A component within it then uses the useCheckpoints hook
+ * to get a reference to the Checkpoints object again, without the need to have
+ * it passed as a prop.
+ *
+ * ```jsx
+ * const App = ({checkpoints}) => (
+ *   <Provider checkpoints={checkpoints}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => (
+ *   <span>{useCheckpoints().getListenerStats().checkpointIds}</span>
+ * );
+ *
+ * const checkpoints = createCheckpoints(createStore());
+ * const app = document.createElement('div');
+ * ReactDOM.render(<App checkpoints={checkpoints} />, app); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>0</span>'
+ * ```
+ * @example
+ * This example creates a Provider context into which a Checkpoints object is
+ * provided, named by Id. A component within it then uses the useCheckpoints
+ * hook with that Id to get a reference to the Checkpoints object again, without
+ * the need to have it passed as a prop.
+ *
+ * ```jsx
+ * const App = ({checkpoints}) => (
+ *   <Provider checkpointsById={{petStore: checkpoints}}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => (
+ *   <span>
+ *     {useCheckpoints('petStore').getListenerStats().checkpointIds}
+ *   </span>
+ * );
+ *
+ * const checkpoints = createCheckpoints(createStore());
+ * const app = document.createElement('div');
+ * ReactDOM.render(<App checkpoints={checkpoints} />, app); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>0</span>'
+ * ```
+ * @category Checkpoints hooks
+ */
+export function useCheckpoints(id?: Id): Checkpoints | undefined;
+
+/**
+ * The useCheckpointIds hook returns an array of the checkpoint Ids being
+ * managed by this Checkpoints object, and registers a listener so that any
+ * changes to that result will cause a re-render.
+ *
+ *
+ * A Provider component is used to wrap part of an application in a context, and
+ * it can contain a default Checkpoints object or a set of Checkpoints objects
+ * named by Id. The useCheckpointIds hook lets you indicate which Checkpoints
+ * object to get data for: omit the optional parameter for the default context
+ * Checkpoints object, provide an Id for a named context Checkpoints object, or
+ * provide a Checkpoints object explicitly by reference.
+ *
+ * When first rendered, this hook will create a listener so that changes to the
+ * checkpoint Ids will cause a re-render. When the component containing this
+ * hook is unmounted, the listener will be automatically removed.
+ *
+ * @param checkpointsOrCheckpointsId The Checkpoints object to be accessed: omit
+ * for the default context Checkpoints object, provide an Id for a named context
+ * Checkpoints object, or provide an explicit reference.
+ * @returns A CheckpointIds array, containing the checkpoint Ids managed by this
+ * Checkpoints object.
+ * @example
+ * This example creates a Checkpoints object outside the application, which is
+ * used in the useCheckpointIds hook by reference. A change to the checkpoint
+ * Ids re-renders the component.
+ *
+ * ```jsx
+ * const store = createStore().setTable('pets', {fido: {species: 'dog'}});
+ * const checkpoints = createCheckpoints(store);
+ * const App = () => (
+ *   <span>{JSON.stringify(useCheckpointIds(checkpoints))}</span>
+ * );
+ *
+ * const app = document.createElement('div');
+ * ReactDOM.render(<App />, app); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>[[],"0",[]]</span>'
+ *
+ * store.setCell('pets', 'fido', 'sold', true); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>[["0"],null,[]]</span>'
+ *
+ * checkpoints.addCheckpoint('sale'); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>[["0"],"1",[]]</span>'
+ * ```
+ * @example
+ * This example creates a Provider context into which a default Checkpoints
+ * object is provided. A component within it then uses the useCheckpointIds
+ * hook.
+ *
+ * ```jsx
+ * const App = ({checkpoints}) => (
+ *   <Provider checkpoints={checkpoints}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => <span>{JSON.stringify(useCheckpointIds())}</span>;
+ *
+ * const checkpoints = createCheckpoints(
+ *   createStore().setTable('pets', {fido: {species: 'dog'}}),
+ * );
+ *
+ * const app = document.createElement('div');
+ * ReactDOM.render(<App checkpoints={checkpoints} />, app); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>[[],"0",[]]</span>'
+ * ```
+ * @example
+ * This example creates a Provider context into which a default Checkpoints
+ * object is provided. A component within it then uses the useCheckpointIds
+ * hook.
+ *
+ * ```jsx
+ * const App = ({checkpoints}) => (
+ *   <Provider checkpointsById={{petCheckpoints: checkpoints}}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => (
+ *   <span>{JSON.stringify(useCheckpointIds('petCheckpoints'))}</span>
+ * );
+ *
+ * const checkpoints = createCheckpoints(
+ *   createStore().setTable('pets', {fido: {species: 'dog'}}),
+ * );
+ *
+ * const app = document.createElement('div');
+ * ReactDOM.render(<App checkpoints={checkpoints} />, app); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>[[],"0",[]]</span>'
+ * ```
+ * @category Checkpoints hooks
+ */
+export function useCheckpointIds(
+  checkpointsOrCheckpointsId?: CheckpointsOrCheckpointsId,
+): CheckpointIds;
+
+/**
+ * The useCheckpoint hook returns the label for a checkpoint, and registers a
+ * listener so that any changes to that result will cause a re-render.
+ *
+ * A Provider component is used to wrap part of an application in a context, and
+ * it can contain a default Checkpoints object or a set of Checkpoints objects
+ * named by Id. The useCheckpoint hook lets you indicate which Checkpoints
+ * object to get data for: omit the optional final parameter for the default
+ * context Checkpoints object, provide an Id for a named context Checkpoints
+ * object, or provide a Checkpoints object explicitly by reference.
+ *
+ * When first rendered, this hook will create a listener so that changes to the
+ * label will cause a re-render. When the component containing this hook is
+ * unmounted, the listener will be automatically removed.
+ *
+ * @param checkpointId The Id of the checkpoint.
+ * @param checkpointsOrCheckpointsId The Checkpoints object to be accessed: omit
+ * for the default context Checkpoints object, provide an Id for a named context
+ * Checkpoints object, or provide an explicit reference.
+ * @returns A string label for the requested checkpoint, an empty string if it
+ * was never set, or `undefined` if the checkpoint does not exist.
+ * @example
+ * This example creates a Checkpoints object outside the application, which is
+ * used in the useCheckpoint hook by reference. A change to the checkpoint label
+ * re-renders the component.
+ *
+ * ```jsx
+ * const store = createStore().setTable('pets', {fido: {species: 'dog'}});
+ * const checkpoints = createCheckpoints(store);
+ * const App = () => <span>{useCheckpoint('1', checkpoints)}</span>;
+ *
+ * const app = document.createElement('div');
+ * ReactDOM.render(<App />, app); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span></span>'
+ *
+ * store.setCell('pets', 'fido', 'sold', true); // !act
  * checkpoints.addCheckpoint('sale'); // !act
  * console.log(app.innerHTML);
  * // -> '<span>sale</span>'
@@ -4898,6 +6168,12 @@ export type TablesProps = {
    * for a named context Store, or provide an explicit reference.
    */
   readonly store?: StoreOrStoreId;
+  /**
+   * An optional boolean that indicates that the component should re-render if
+   * the set of Table Ids in the Store remains the same but their order changes.
+   * See the addTableIdsListener method for more details.
+   */
+  readonly trackReorder?: boolean;
   /**
    * A component for rendering each Table in the Store (to override the default
    * TableView component).
@@ -4935,6 +6211,12 @@ export type TableProps = {
    * for a named context Store, or provide an explicit reference.
    */
   readonly store?: StoreOrStoreId;
+  /**
+   * An optional boolean that indicates that the component should re-render if
+   * the set of Row Ids in the Table remains the same but their order changes.
+   * See the addRowIdsListener method for more details.
+   */
+  readonly trackReorder?: boolean;
   /**
    * A custom component for rendering each Row in the Table (to override the
    * default RowView component).
@@ -4976,6 +6258,12 @@ export type RowProps = {
    * for a named context Store, or provide an explicit reference.
    */
   readonly store?: StoreOrStoreId;
+  /**
+   * An optional boolean that indicates that the component should re-render if
+   * the set of Cell Ids remains the same but their order changes. See the
+   * addCellIdsListener method for more details.
+   */
+  readonly trackReorder?: boolean;
   /**
    * A custom component for rendering each Cell in the Row (to override the
    * default CellView component).
@@ -5220,38 +6508,159 @@ export type LocalRowsProps = {
  *
  * @category Props
  */
-export type LinkedRowsProps = {
-  /**
-   * The Id of the Relationship in the Relationships object.
-   */
-  readonly relationshipId: Id;
+export type LinkedRowsProps = {
+  /**
+   * The Id of the Relationship in the Relationships object.
+   */
+  readonly relationshipId: Id;
+  /**
+   * The Id of the first Row in the linked list Relationship.
+   */
+  readonly firstRowId: Id;
+  /**
+   * The Relationships object to be accessed: omit for the default context
+   * Relationships object, provide an Id for a named context Relationships
+   * object, or provide an explicit reference.
+   */
+  readonly relationships?: RelationshipsOrRelationshipsId;
+  /**
+   * A component for rendering each (remote, local, or linked) Row in the
+   * Relationship.
+   */
+  readonly rowComponent?: ComponentType<RowProps>;
+  /**
+   * A function for generating extra props for each Row component based on its
+   * Id.
+   */
+  readonly getRowComponentProps?: (rowId: Id) => ExtraProps;
+  /**
+   * A component or string to separate each Row component.
+   */
+  readonly separator?: ReactElement | string;
+  /**
+   * Whether the component should also render the Id of the Row in the
+   * Relationship, and its descendent objects, to assist with debugging.
+   */
+  readonly debugIds?: boolean;
+};
+
+/**
+ * ResultTableProps props are used for components that refer to a single query
+ * result Table, such as the ResultTableView component.
+ *
+ * @category Props
+ */
+export type ResultTableProps = {
+  /**
+   * The Id of the query in the Queries object for which the result Table will
+   * be rendered.
+   */
+  readonly queryId: Id;
+  /**
+   * 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.
+   */
+  readonly queries?: QueriesOrQueriesId;
+  /**
+   * An optional boolean that indicates that the component should re-render if
+   * the set of Row Ids in the result Table remains the same but their order
+   * changes. See the addResultRowIdsListener method for more details.
+   */
+  readonly trackReorder?: boolean;
+  /**
+   * A custom component for rendering each Row in the Table (to override the
+   * default ResultRowView component).
+   */
+  readonly resultRowComponent?: ComponentType<ResultRowProps>;
+  /**
+   * A function for generating extra props for each custom Row component based
+   * on its Id.
+   */
+  readonly getResultRowComponentProps?: (rowId: Id) => ExtraProps;
+  /**
+   * A component or string to separate each Row component.
+   */
+  readonly separator?: ReactElement | string;
+  /**
+   * Whether the component should also render the Id of the query, and its
+   * descendent objects, to assist with debugging.
+   */
+  readonly debugIds?: boolean;
+};
+
+/**
+ * ResultRowProps props are used for components that refer to a single Row in a
+ * query result Table, such as the ResultRowView component.
+ *
+ * @category Props
+ */
+export type ResultRowProps = {
+  /**
+   * The Id of the query in the Queries object for which the result Table will
+   * be rendered.
+   */
+  readonly queryId: Id;
+  /**
+   * The Id of the Row in the result Table to be rendered.
+   */
+  readonly rowId: Id;
+  /**
+   * 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.
+   */
+  readonly queries?: QueriesOrQueriesId;
+  /**
+   * A custom component for rendering each Cell in the Row (to override the
+   * default CellView component).
+   */
+  readonly resultCellComponent?: ComponentType<ResultCellProps>;
+  /**
+   * A function for generating extra props for each custom Cell component based
+   * on its Id.
+   */
+  readonly getResultCellComponentProps?: (cellId: Id) => ExtraProps;
+  /**
+   * A component or string to separate each Cell component.
+   */
+  readonly separator?: ReactElement | string;
+  /**
+   * Whether the component should also render the Id of the Row, and its
+   * descendent objects, to assist with debugging.
+   */
+  readonly debugIds?: boolean;
+};
+
+/**
+ * ResultRowProps props are used for components that refer to a single Cell in a
+ * Row of a result Table, such as the ResultCellView component.
+ *
+ * @category Props
+ */
+export type ResultCellProps = {
   /**
-   * The Id of the first Row in the linked list Relationship.
-   */
-  readonly firstRowId: Id;
-  /**
-   * The Relationships object to be accessed: omit for the default context
-   * Relationships object, provide an Id for a named context Relationships
-   * object, or provide an explicit reference.
+   * The Id of the query in the Queries object for which the result Table will
+   * be rendered.
    */
-  readonly relationships?: RelationshipsOrRelationshipsId;
+  readonly queryId: Id;
   /**
-   * A component for rendering each (remote, local, or linked) Row in the
-   * Relationship.
+   * The Id of the Row in the Table.
    */
-  readonly rowComponent?: ComponentType<RowProps>;
+  readonly rowId: Id;
   /**
-   * A function for generating extra props for each Row component based on its
-   * Id.
+   * The Id of the Cell in the Row to be rendered.
    */
-  readonly getRowComponentProps?: (rowId: Id) => ExtraProps;
+  readonly cellId: Id;
   /**
-   * A component or string to separate each Row component.
+   * 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.
    */
-  readonly separator?: ReactElement | string;
+  readonly queries?: QueriesOrQueriesId;
   /**
-   * Whether the component should also render the Id of the Row in the
-   * Relationship, and its descendent objects, to assist with debugging.
+   * Whether the component should also render the Id of the Cell to assist with
+   * debugging.
    */
   readonly debugIds?: boolean;
 };
@@ -5430,6 +6839,16 @@ export type ProviderProps = {
    * within the Provider context by their Id.
    */
   readonly relationshipsById?: {[relationshipsId: Id]: Relationships};
+  /**
+   * A default single Queries object that will be available within the Provider
+   * context.
+   */
+  readonly queries?: Queries;
+  /**
+   * An object containing multiple Queries objects that will be available within
+   * the Provider context by their Id.
+   */
+  readonly queriesById?: {[queriesId: Id]: Queries};
   /**
    * A default single Checkpoints object that will be available within the
    * Provider context.
@@ -6727,6 +8146,396 @@ export function LocalRowsView(props: LocalRowsProps): ComponentReturnType;
  */
 export function LinkedRowsView(props: LinkedRowsProps): ComponentReturnType;
 
+/**
+ * The ResultCellView component renders the value of a single Cell in a given
+ * Row, in a given query's result Table, and registers a listener so that any
+ * changes to that result will cause a re-render.
+ *
+ * The component's props identify which Cell to render based on query Id, Row
+ * Id, Cell Id, and Queries object (which is either the default context Queries
+ * object, a named context Queries object, or an explicit reference).
+ *
+ * A Cell contains a string, number, or boolean, so the value is rendered
+ * directly without further decoration. You can create your own
+ * ResultCellView-like component to customize the way that a Cell is rendered:
+ * see the ResultRowView component for more details.
+ *
+ * This component uses the useResultCell hook under the covers, which means that
+ * any changes to the specified Cell will cause a re-render.
+ *
+ * @param props The props for this component.
+ * @returns A rendering of the result Cell, or nothing, if not present.
+ * @example
+ * This example creates a Queries object outside the application, which is used
+ * in the ResultCellView component by reference. A change to the data in the
+ * Store re-renders the component.
+ *
+ * ```jsx
+ * const store = createStore().setTable('pets', {
+ *   fido: {species: 'dog', color: 'brown'},
+ *   felix: {species: 'cat', color: 'black'},
+ *   cujo: {species: 'dog', color: 'black'},
+ * });
+ * const queries = createQueries(store).setQueryDefinition(
+ *   'petColors',
+ *   'pets',
+ *   ({select}) => select('color'),
+ * );
+ * const App = () => (
+ *   <span>
+ *     <ResultCellView
+ *       queryId="petColors"
+ *       rowId="fido"
+ *       cellId="color"
+ *       queries={queries}
+ *     />
+ *   </span>
+ * );
+ *
+ * const app = document.createElement('div');
+ * ReactDOM.render(<App />, app); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>brown</span>'
+ *
+ * store.setCell('pets', 'fido', 'color', 'walnut'); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>walnut</span>'
+ * ```
+ * @example
+ * This example creates a Provider context into which a default Queries object
+ * is provided. The ResultCellView component within it then renders the Cell
+ * (with its Id for readability).
+ *
+ * ```jsx
+ * const App = ({queries}) => (
+ *   <Provider queries={queries}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => (
+ *   <span>
+ *     <ResultCellView
+ *       queryId="petColors"
+ *       rowId="fido"
+ *       cellId="color"
+ *       debugIds={true}
+ *     />
+ *   </span>
+ * );
+ *
+ * const queries = createQueries(
+ *   createStore().setTable('pets', {
+ *     fido: {species: 'dog', color: 'brown'},
+ *     felix: {species: 'cat', color: 'black'},
+ *     cujo: {species: 'dog', color: 'black'},
+ *   }),
+ * ).setQueryDefinition('petColors', 'pets', ({select}) => select('color'));
+ * const app = document.createElement('div');
+ * ReactDOM.render(<App queries={queries} />, app); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span>color:{brown}</span>'
+ * ```
+ * @example
+ * This example creates a Provider context into which a default Queries object
+ * is provided. The ResultCellView component within it then attempts to render a
+ * non-existent Cell.
+ *
+ * ```jsx
+ * const App = ({queries}) => (
+ *   <Provider queries={queries}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => (
+ *   <span>
+ *     <ResultCellView queryId="petColors" rowId="fido" cellId="height" />
+ *   </span>
+ * );
+ *
+ * const queries = createQueries(
+ *   createStore().setTable('pets', {
+ *     fido: {species: 'dog', color: 'brown'},
+ *     felix: {species: 'cat', color: 'black'},
+ *     cujo: {species: 'dog', color: 'black'},
+ *   }),
+ * ).setQueryDefinition('petColors', 'pets', ({select}) => select('color'));
+ * const app = document.createElement('div');
+ * ReactDOM.render(<App queries={queries} />, app); // !act
+ * console.log(app.innerHTML);
+ * // -> '<span></span>'
+ * ```
+ * @category Queries components
+ */
+export function ResultCellView(props: ResultCellProps): ComponentReturnType;
+
+/**
+ * The ResultRowView component renders the contents of a single Row in a given
+ * query's result Table, and registers a listener so that any changes to that
+ * result will cause a re-render.
+ *
+ * The component's props identify which Row to render based on query Id, Row Id,
+ * and Queries object (which is either the default context Queries object, a
+ * named context Queries object, or an explicit reference).
+ *
+ * This component renders a Row by iterating over its Cell values. By default
+ * these are in turn rendered with the ResultCellView component, but you can
+ * override this behavior by providing a `resultCellComponent` prop, a custom
+ * component of your own that will render a Cell based on ResultCellProps. You
+ * can also pass additional props to your custom component with the
+ * `getResultCellComponentProps` callback prop.
+ *
+ * You can create your own ResultRowView-like component to customize the way
+ * that a result Row is rendered: see the ResultTableView component for more
+ * details.
+ *
+ * This component uses the useResultCellIds hook under the covers, which means
+ * that any changes to the structure of the result Row will cause a re-render.
+ *
+ * @param props The props for this component.
+ * @returns A rendering of the result Row, or nothing, if not present.
+ * @example
+ * This example creates a Queries object outside the application, which is used
+ * in the ResultRowView component by reference. A change to the data in the
+ * Store re-renders the component.
+ *
+ * ```jsx
+ * const store = createStore().setTable('pets', {
+ *   fido: {species: 'dog', color: 'brown'},
+ *   felix: {species: 'cat', color: 'black'},
+ *   cujo: {species: 'dog', color: 'black'},
+ * });
+ * const queries = createQueries(store).setQueryDefinition(
+ *   'petColors',
+ *   'pets',
+ *   ({select}) => {
+ *     select('species');
+ *     select('color');
+ *   },
+ * );
+ * const App = () => (
+ *   <div>
+ *     <ResultRowView
+ *       queryId="petColors"
+ *       rowId="fido"
+ *       queries={queries}
+ *       separator="/"
+ *     />
+ *   </div>
+ * );
+ *
+ * const app = document.createElement('div');
+ * ReactDOM.render(<App />, app); // !act
+ * console.log(app.innerHTML);
+ * // -> '<div>dog/brown</div>'
+ *
+ * store.setCell('pets', 'fido', 'color', 'walnut'); // !act
+ * console.log(app.innerHTML);
+ * // -> '<div>dog/walnut</div>'
+ * ```
+ * @example
+ * This example creates a Provider context into which a default Queries object
+ * is provided. The ResultRowView component within it then renders the Row (with
+ * Ids for readability).
+ *
+ * ```jsx
+ * const App = ({queries}) => (
+ *   <Provider queries={queries}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => (
+ *   <div>
+ *     <ResultRowView queryId="petColors" rowId="fido" debugIds={true} />
+ *   </div>
+ * );
+ *
+ * const queries = createQueries(
+ *   createStore().setTable('pets', {
+ *     fido: {species: 'dog', color: 'brown'},
+ *     felix: {species: 'cat', color: 'black'},
+ *     cujo: {species: 'dog', color: 'black'},
+ *   }),
+ * ).setQueryDefinition('petColors', 'pets', ({select}) => {
+ *   select('species');
+ *   select('color');
+ * });
+ * const app = document.createElement('div');
+ * ReactDOM.render(<App queries={queries} />, app); // !act
+ * console.log(app.innerHTML);
+ * // -> '<div>fido:{species:{dog}color:{brown}}</div>'
+ * ```
+ * @example
+ * This example creates a Provider context into which a default Queries object
+ * is provided. The ResultRowView component within it then renders the Row with
+ * a custom Cell component and a custom props callback.
+ *
+ * ```jsx
+ * const App = ({queries}) => (
+ *   <Provider queries={queries}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => (
+ *   <div>
+ *     <ResultRowView
+ *       queryId="petColors"
+ *       rowId="fido"
+ *       resultCellComponent={FormattedResultCellView}
+ *       getResultCellComponentProps={(cellId) => ({
+ *         bold: cellId == 'species',
+ *       })}
+ *     />
+ *   </div>
+ * );
+ * const FormattedResultCellView = ({queryId, rowId, cellId, bold}) => (
+ *   <span>
+ *     {bold ? <b>{cellId}</b> : cellId}
+ *     {': '}
+ *     <ResultCellView queryId={queryId} rowId={rowId} cellId={cellId} />
+ *   </span>
+ * );
+ *
+ * const queries = createQueries(
+ *   createStore().setTable('pets', {
+ *     fido: {species: 'dog', color: 'brown'},
+ *     felix: {species: 'cat', color: 'black'},
+ *     cujo: {species: 'dog', color: 'black'},
+ *   }),
+ * ).setQueryDefinition('petColors', 'pets', ({select}) => {
+ *   select('species');
+ *   select('color');
+ * });
+ * const app = document.createElement('div');
+ * ReactDOM.render(<App queries={queries} />, app); // !act
+ * console.log(app.innerHTML);
+ * // -> '<div><span><b>species</b>: dog</span><span>color: brown</span></div>'
+ * ```
+ * @category Queries components
+ */
+export function ResultRowView(props: ResultRowProps): ComponentReturnType;
+
+/**
+ * The ResultTableView component renders the contents of a single query's result
+ * Table in a Queries object, and registers a listener so that any changes to
+ * that result will cause a re-render.
+ *
+ * The component's props identify which Table to render based on query Id, and
+ * Queries object (which is either the default context Queries object, a named
+ * context Queries object, or by explicit reference).
+ *
+ * This component renders a result Table by iterating over its Row objects. By
+ * default these are in turn rendered with the ResultRowView component, but you
+ * can override this behavior by providing a `resultRowComponent` prop, a custom
+ * component of your own that will render a Row based on ResultRowProps. You can
+ * also pass additional props to your custom component with the
+ * `getResultRowComponentProps` callback prop.
+ *
+ * This component uses the useResultRowIds hook under the covers, which means
+ * that any changes to the structure of the result Table will cause a re-render.
+ *
+ * @param props The props for this component.
+ * @returns A rendering of the result Table, or nothing, if not present.
+ * @example
+ * This example creates a Queries object outside the application, which is used
+ * in the ResultTableView component by reference. A change to the data in the
+ * Store re-renders the component.
+ *
+ * ```jsx
+ * const store = createStore().setTable('pets', {
+ *   fido: {species: 'dog', color: 'brown'},
+ *   felix: {species: 'cat', color: 'black'},
+ * });
+ * const queries = createQueries(store).setQueryDefinition(
+ *   'petColors',
+ *   'pets',
+ *   ({select}) => select('color'),
+ * );
+ * const App = () => (
+ *   <div>
+ *     <ResultTableView queryId="petColors" queries={queries} separator="/" />
+ *   </div>
+ * );
+ *
+ * const app = document.createElement('div');
+ * ReactDOM.render(<App />, app); // !act
+ * console.log(app.innerHTML);
+ * // -> '<div>brown/black</div>'
+ *
+ * store.setRow('pets', 'cujo', {species: 'dog', color: 'black'}); // !act
+ * console.log(app.innerHTML);
+ * // -> '<div>brown/black/black</div>'
+ * ```
+ * @example
+ * This example creates a Provider context into which a default Queries object
+ * is provided. The ResultTableView component within it then renders the Table
+ * (with Ids for readability).
+ *
+ * ```jsx
+ * const App = ({queries}) => (
+ *   <Provider queries={queries}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => (
+ *   <div>
+ *     <ResultTableView queryId="petColors" debugIds={true} />
+ *   </div>
+ * );
+ *
+ * const queries = createQueries(
+ *   createStore().setTable('pets', {
+ *     fido: {species: 'dog', color: 'brown'},
+ *     felix: {species: 'cat', color: 'black'},
+ *   }),
+ * ).setQueryDefinition('petColors', 'pets', ({select}) => select('color'));
+ * const app = document.createElement('div');
+ * ReactDOM.render(<App queries={queries} />, app); // !act
+ * console.log(app.innerHTML);
+ * // -> '<div>petColors:{fido:{color:{brown}}felix:{color:{black}}}</div>'
+ * ```
+ * @example
+ * This example creates a Provider context into which a default Queries object
+ * is provided. The ResultTableView component within it then renders the Table
+ * with a custom Row component and a custom props callback.
+ *
+ * ```jsx
+ * const App = ({queries}) => (
+ *   <Provider queries={queries}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => (
+ *   <div>
+ *     <ResultTableView
+ *       queryId="petColors"
+ *       resultRowComponent={FormattedRowView}
+ *       getResultRowComponentProps={(rowId) => ({bold: rowId == 'fido'})}
+ *     />
+ *   </div>
+ * );
+ * const FormattedRowView = ({queryId, rowId, bold}) => (
+ *   <span>
+ *     {bold ? <b>{rowId}</b> : rowId}
+ *     {': '}
+ *     <ResultRowView queryId={queryId} rowId={rowId} />
+ *   </span>
+ * );
+ *
+ * const queries = createQueries(
+ *   createStore().setTable('pets', {
+ *     fido: {species: 'dog', color: 'brown'},
+ *     felix: {species: 'cat', color: 'black'},
+ *   }),
+ * ).setQueryDefinition('petColors', 'pets', ({select}) => select('color'));
+ * const app = document.createElement('div');
+ * ReactDOM.render(<App queries={queries} />, app); // !act
+ * console.log(app.innerHTML);
+ * // -> '<div><span><b>fido</b>: brown</span><span>felix: black</span></div>'
+ * ```
+ * @category Queries components
+ */
+export function ResultTableView(props: ResultTableProps): ComponentReturnType;
+
 /**
  * The CheckpointView component simply renders the label of a checkpoint.
  *