Paginação / Lazyloading com Firebase Database

Question

Quero carregar 20 itens do banco de dados firebase inicialmente e assim que um usuário rolar para baixo, mais 20 itens devem ser carregados. Eu pensei que eu poderia usar startat / ENDAT métodos para isso, mas que não funciona dessa forma. alguém pode me apontar na direção certa?

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

Parece que você trabalhou com bancos de dados nos quais os resultados da consulta podem ser baseados em um deslocamento: um valor numérico que você passa de quantos itens devem ser ignorados.

As consultas do Firebase não funcionam com esses deslocamentos, mas são baseadas no conceito de um cursor - ou um item âncora. Para obter uma página de resultados, você deve saber em qual item (a âncora) iniciar e quantos itens retornar.

Em seu código, isso significa que, em vez de contar o número de itens a serem ignorados, você precisa controlar o nó por onde começar. Especificamente, você precisa saber a chave e qualquer propriedade que classificou. Como você não está classificando nada, você só precisa da chave.

Para obter a primeira página de itens, faça algo assim:

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;
  })
  ...
}

Portanto, as mudanças acima são:

1. Ordenamos explicitamente a consulta por chave, o que garante que o servidor saiba como ordenar os dados - e é a chave para poder paginar de forma consistente.
2. Em seguida, limitamos a 20 itens por telefone limitToFirst(20).
3. Finalmente, rastreamos a última chave nos resultados (nossa âncora), para que possamos usá-la como ponto de partida para futuras consultas.

Então, quando você estiver pronto para obter a próxima página, faça o seguinte:

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

Então agora nós:

• Comece pela última chave que vimos anteriormente (nosso item âncora).
• Recupere 21 em vez de 20 itens, pois já mostramos o item âncora na página anterior.

Este tópico foi abordado com bastante regularidade antes, portanto, recomendo também verificar algumas das respostas a outras perguntas sobre paginação no Firebase .