Issue with $key in fb-util infinite scroll

Question

I am using fb-util for infinite scroll and everything looks good. However, once I hit 250 elements, I am seeing the following error. Any idea what this is about ?

Error: Query: When ordering by key, you may only pass one argument to startAt(), endAt(), or equalTo(). at Jh (https://www.gstatic.com/firebasejs/3.2.1/firebase.js:431:117) at X.g.Nd (https://www.gstatic.com/firebasejs/3.2.1/firebase.js:441:298) at r._grow (https://<>/content/script/firebase-util.min.js:10:8979) at r._listen (https://<>/content/script/firebase-util.min.js:10:10961) at r.goTo (https://<>/content/script/firebase-util.min.js:10:8062) at r.moveTo (https://<>/content/script/firebase-util.min.js:10:3672) at r.next (https://<>/content/script/firebase-util.min.js:10:17083) at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:198:424 at xa.(anonymous function) (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:59:133) at l.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:126:84)

Code:

var baseRef = firebase.database().ref().child(refPath);
var scrollRef = new firebase.util.Scroll(baseRef, '$key');
scrollRef.scroll.next(25);
var list = $firebaseArray(scrollRef);
list.scroll = scrollRef.scroll;

Front-end code:

<div infinite-scroll="vm.products.scroll.next(10)" infinite-scroll-distance="1">

nb: Changing the key from $key to $priority or name or productid, stopped producing the error. But, this caused the earlier elements to be replaced.

Ahsan Ahsan · Accepted Answer · 2016-12-20T16:49:02

So, while I do not have an answer for the first part of the question, based on the additional note, I have this fix:

var scrollRef = new firebase.util.Scroll(baseRef, '$priority', {maxCacheSize: 750, windowSize: 500});

Setting the maxCacheSize and windowSize to a higher value should solve the issue. As per documentation, if we exceed windowSize then the start of the array is trimmed to keep the size under limit.

Documentation:

Keys/values that can be passed via opts:

{int} windowSize: the maximum number of records to have loaded in the list at any given time. 3-5 times the size of the viewable window is a good optimization, depending on how fast content is scrolled and the payload of each record (i.e. how long it takes to download).
{int} maxCacheSize: in general, leave this as the default. This controls the internal cursor's cache, which is used to find the current position in the list. This controls how many keys it can load at any given time. This is, by default, three times the size of windowSize and should always be larger than windowSize.

Issue with $key in fb-util infinite scroll

1 Answers