Obsługa stronicowania i sortowania

Interfejs API zwraca wyniki wyszukiwania w postaci stron. Oto jak sprawnie poruszać się po dużych zbiorach wyników.

Podstawowe stronicowanie

POST /resources
{
  "query": "saints",
  "page": 1,
  "page_size": 20
}
Odpowiedź:
{
  "total": 1523,
  "page": 1,
  "page_size": 20,
  "results": [ ... 20 items ... ]
}

Odpowiedź informuje, że łącznie jest 1 523 wyniki, a Ty przeglądasz stronę 1 z 20 elementami.

Obliczanie liczby stron

const totalPages = Math.ceil(response.total / response.page_size);
// 1523 / 20 = 76.15 → 77 stron

Wczytywanie następnej strony

// Prosta kolejna strona
currentPage++;
// Albo zbuduj interfejs stronicowania
for (let page = 1; page <= totalPages; page++) {
  // Utwórz przycisk strony
}

Optymalizacja rozmiaru strony

Wybierz rozmiar strony w zależności od swojego przypadku użycia:

Małe strony (10–20 elementów):

• Szybsze początkowe wczytywanie

• Dobre do wyszukiwania dostępnego dla użytkowników

• Potrzebnych jest więcej zapytań do API

Duże strony (50–100 elementów):

• Mniej zapytań do API

• Dobre do przetwarzania wsadowego

• Wolniejsze pojedyncze zapytania

• Maksimum to 100 elementów

Opcje sortowania

Popularne (domyślne):

{
  "order": "popular"
}

Zwraca najpierw najczęściej pobierane zasoby. Najlepsze do prezentowania treści wysokiej jakości, sprawdzonych.

Najnowsze:

{
  "order": "recent"
}

Zwraca najpierw najnowsze przesłane materiały. Dobre do odkrywania świeżych treści.

Przykład nieskończonego przewijania

let currentPage = 1;
const pageSize = 20;
let isLoading = false;
let hasMore = true;
async function loadMore() {
  if (isLoading || !hasMore) return;
  
  isLoading = true;
  
  const response = await fetch('https://api.cathopic.com/resources', {
    method: 'POST',
    headers: {
      'x-api-key': apiKey,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      query: 'prayer',
      page: currentPage,
      page_size: pageSize,
      order: 'popular'
    })
  });
  
  const data = await response.json();
  
  // Dodaj wyniki do swojego interfejsu
  appendResults(data.results);
  
  // Sprawdź, czy są kolejne strony
  const totalPages = Math.ceil(data.total / pageSize);
  hasMore = currentPage < totalPages;
  
  currentPage++;
  isLoading = false;
}
// Wywołaj przy przewijaniu
window.addEventListener('scroll', () => {
  if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 500) {
    loadMore();
  }
});

Wskazówki dotyczące wydajności

• Buforuj wyniki lokalnie, aby uniknąć zbędnych zapytań

• Stosuj odpowiednie rozmiary stron do swojego przypadku użycia

• Wdroż stany ładowania dla lepszego UX

• Rozważ wirtualizację dla bardzo długich list

• Nie pobieraj wszystkich stron naraz — wczytuj na żądanie

Aby uzyskać więcej szczegółów, zobacz pełną dokumentację na stronie api.cathopic.com/docs.