Create a pagination

[carlo-fontanos]

Hi,

I am aware that LIMIT can't go with OFFSET, but is there any way I could create a simple pagination that just shows a "Load More" button and on click would just query the next list starting from the last item of the current list? I am actually able to achieve this in firestore like this:

componentDidMount() {
	const { lastItem, pageLimit } = this.state;

	this.setState({ loadingBtn: true });

	/* Load first page */
	 var productList = this.props.firebase.products().orderBy('name').limit(pageLimit);

	/* If there's a last item set, we start the query after that item using startAfter() method */
	if( loadmore && lastItem ){
		productList = productList.startAfter(lastItem.data().name);
	}


	productList.onSnapshot(snapshot => {
		let products = [];

		snapshot.forEach(doc =>
			products.push({ ...doc.data(), pid: doc.id }),
		);
		
		this.setState((prevState) => ({
			products: prevState.products ? [...prevState.products, ...products]: products,
			loadingBtn: false,
			lastItem: snapshot.docs[snapshot.docs.length - 1], 
			showMoreBtn: products.length < pageLimit ? false : true, 
		}));
	});
}

render() {
	const { products, loadingBtn,  showMoreBtn } = this.state;
	return (
		<div>
			{products ? products.map((product, index) => (
				... Show product list
			))  : <div>No products</div>}
			
			{showMoreBtn 
				? 
					<button 
						className="btn btn-purple font-weight-bold btn-lg mt-3" 
						onClick={() => this.loadProducts(1)}
					>
						{loadingBtn ? <span>Loading...</span> : <span>Load More</span>}
					</button>
				:
					<span className="mt-3 d-block">End of result</span>
			}
		</div>
	);
}

I am not sure how to convert the above code to use FireSQL