Pagination / Lazyloading z Firebase Database

Question

Chcę na początku załadować 20 pozycji z bazy danych Firebase i gdy tylko użytkownik przewinie w dół, powinno zostać załadowanych 20 kolejnych pozycji. Pomyślałem, że mógłbym do tego użyć metod startAt / endAt , ale to nie działa w ten sposób. czy ktoś może wskazać mi właściwy kierunek?

constructor() {
    this.state = {
      startAt: 0,
      endAt: 20,
    };
  }

retrieveData(startAt, endAt) {

const ref = firebase.database().ref().child('clubs').startAt(startAt).endAt(endAt);
ref.on('value', gotData, errorData);

function gotData(data) {
  
// do some stuff with received data

  that.setState({
    startAt: endAt + 1,
    endAt: endAt + endAt
  });
}

function errorData(error) {
  console.log(error);
}

Answer 1

Wydaje się, że pracowałeś z bazami danych, w których wyniki zapytań mogą być oparte na przesunięciu: wartości liczbowej, którą przekazujesz, określającej liczbę elementów do pominięcia.

Zapytania Firebase nie działają z takimi przesunięciami, ale zamiast tego opierają się na koncepcji kursora lub elementu zakotwiczenia. Aby otrzymać stronę wyników, musisz wiedzieć, od której pozycji (kotwicy) rozpocząć i ile pozycji zwrócić.

W twoim kodzie oznacza to, że zamiast zliczać liczbę elementów do pominięcia, musisz śledzić węzeł, od którego zacząć. W szczególności musisz znać klucz i jakąkolwiek posortowaną właściwość. Ponieważ niczego nie sortujesz, potrzebujesz tylko klucza.

Aby otrzymać pierwszą stronę przedmiotów, zrób coś takiego:

let query = firebase.database().ref().child('clubs').orderByKey().limitToFirst(20);
var lastSeenKey;
ref.on('value', gotData, errorData);

function gotData(data) {
  data.forEach((snapshot) => {
    lastSeenKey = snapshot.key;
  })
  ...
}

Zatem powyższe zmiany to:

1. Wyraźnie porządkujemy zapytanie według klucza, co zapewnia serwerowi, jak uporządkować dane - i jest kluczem do możliwości spójnego paginowania.
2. Dzwoniąc ograniczamy się do 20 pozycji limitToFirst(20).
3. Na koniec śledzimy ostatni klucz w wynikach (nasz zakotwiczenie), abyśmy mogli użyć go jako punktu wyjścia w przyszłych zapytaniach.

Następnie, gdy będziesz gotowy do pobrania następnej strony, wykonaj następujące czynności:

let query = firebase.database().ref().child('clubs').orderByKey().startAt(lastSeenKey).limitToFirst(21);

Więc teraz:

• Zacznij od ostatniego klucza, który widzieliśmy wcześniej (naszego zakotwiczenia).
• Pobierz 21 zamiast 20 pozycji, ponieważ już pokazaliśmy zakotwiczenie na poprzedniej stronie.

Ten temat był już wcześniej omawiany dość regularnie, więc polecam również zapoznać się z odpowiedziami na inne pytania dotyczące paginacji w Firebase .