category.query.js

  // manually generate token for a given page (for when data is available in local)
  generateTokenForPage(page: number): string {
    return btoa(JSON.stringify({ skip: page * this.recordsPerPage, limit: this.recordsPerPage }));
  }

liveCollection.js

  /**
   * Reset the current records being contained to the default first page.
   *
   * @memberof LiveCollection
   */
  resetPage() {
    this._page = 0;
    this._token = undefined;

    // even though models.length !== 0 because dataStatus === local !!!
    if (this.models.length > 0) {
      this._token = this._transaction.generateTokenForPage(1);
    }

    this._loadData();
  }

useLiveCollection.js

import { useState, useEffect } from 'react';
//import { LoadingStatus } from '@amityco/js-sdk';

const noop = () => {
  if (process?.env?.NODE_ENV === 'development') console.warn('[useLiveCollection] noop hit');
};

const useLiveCollection = (
  createLiveCollection,
  dependencies = [],
  resolver = () => dependencies.some(dep => !dep),
  debug = null,
) => {
  const [data, setData] = useState({
    items: [],
    hasMore: false,
    loadMore: noop,
  });

  useEffect(() => {
    if (resolver()) return;

    const liveCollection = createLiveCollection();

    const updateLiveCollection = items => {
      setTimeout(() => {
        debug && console.log(debug, liveCollection.dataStatus, liveCollection.hasMore);

        const { hasMore = false } = liveCollection;

        setData({
          items,
          hasMore,
          loadMore: hasMore ? () => liveCollection.nextPage() : noop,
        });
      }, 0);
    };

    if (debug) {
      window.lc = liveCollection;
    }

    try {
      liveCollection.on('dataUpdated', models => {
        debug && console.log('dataUpdated!');
        updateLiveCollection(models);
      });

      if (liveCollection.models) {
        debug && console.log('from client cache');
        updateLiveCollection(liveCollection.models);
      }
    } catch (err) {
      if (process.env.NODE_ENV === 'development')
        console.warn('[useLiveCollection] error thrown', err);
    }

    return () => liveCollection.dispose();
  }, [...dependencies]);

  return [data.items, data.hasMore, data.loadMore];
};

export default useLiveCollection;