useLoadMore for for paging JS request

JavaScript
,
1

Afternoon LEAF,

I found the useLoadMore hook in the LKB and was wondering if this can be used for downloading initialization data via REST.

I tried the example presented in the LKB but it enters what looks like a re-render cycle that quickly exhausts resources and it never actually retrieved any dataObjects.

Thank you.
sg

2

Hello @Stephen.A.Gorman,

Could you please provide the DataObjectQuery that you provided to the useLoadMore hook?

In order to take advantage of this hook’s functionality, you will need to add a PagingSpec. If you provide a query without a PagingSpec, then the hook will attempt to load the entire result set on the first render, which would cause performance issues if the set is large.

Dustin

3

Hi Dustin,

const dataObjectQuery = Q.dataObjectQuery().addFilters(Q.types(["ResidentSpaceObjectTleObservation"]));

Maybe it should be this:

    const dataObjectQuery = Q.dataObjectQuery().addFilters(
        Q.types(["ResidentSpaceObjectTleObservation"]));
    dataObjectQuery.pagingSpec={ pageSize: 20, pageNumber: 0 };
1 Like
4

Try passing a pagingSpec to the query. I believe the example below should set it up where each page has 10 results and it starts on the first page.

const dataObjectQuery = Q.dataObjectQuery({
  pagingSpec: new PagingSpec(10, 0)
}).addFilters(Q.types(["ResidentSpaceObjectTleObservation"]));

Edit: I didn’t see the second part of your post, but that should work in your case as well

5

Where do I import PagingSpec from? That “new PagingSpec” feels like Java.

6

You must mean this:

    const dataObjectQuery = Q.dataObjectQuery({
        pagingSpec: { pageSize: 20, pageNumber: 0 }
    }).addFilters(Q.types(["ResidentSpaceObjectTleObservation"]));
7

Yes, that is correct. I had the incorrect example tab open, apologies

8

Confirmed.

import {useLoadMore} from '@leaf-framework/react';
import React from 'react';

function MyExample({ dataObjectService, dataChangeEventManager,dataObjectQuery }) {

    const {
        dataObjects,
        canLoadMore,
        loadMore,
        loading,
    } = useLoadMore({
        dataObjectService,
        dataObjectQuery,
        dataChangeEventManager,
    });

    return (
        <div>
            <ul>
                {console.log(dataObjects.length)}
            </ul>
            {loading && <span>loading...</span>}
            {canLoadMore && (
                <button onClick={loadMore}>More</button>
            )}
        </div>

    )
}
export default MyExample;

And the component declaration:

<MyExample dataObjectService={tleObs.dataService.dataObjectService}
                    dataChangeEventManager={tleObs.dataChangeEventManager}
                    dataObjectQuery={dataObjectQuery}/>

And the Query:

const dataObjectQuery = Q.dataObjectQuery({
    pagingSpec: { pageSize: 20, pageNumber: 0 }
}).addFilters(Q.types(["ResidentSpaceObjectTleObservation"]));

Thanks Dustin.

1 Like