इनफ़िनिट फ़ीड

जो फ़ीड कभी ख़त्म नहीं होती, उसे दर्शक के देखते-देखते डेटा लाना पड़ता है: इतनी जल्दी कि अगली पोस्ट पहले से तैयार हो, जब कोई पेज आ रहा हो या फ़ेल हो जाए तब दिखाने के लिए कुछ हो, और फ़ीड हटने के बाद कोई रिक्वेस्ट चलती न रहे।

आज़माएँ

हर वर्ज़न ./api इम्पोर्ट करता है, जो आपके बैकएंड की जगह खड़ा है: fetchPosts(page, signal) पोस्ट का एक पेज लौटाता है और सिग्नल abort होते ही रुक जाता है। इसकी जगह अपने API का कॉल लगाएँ, और failNextRequest हटा दें, जो सिर्फ़ डेमो का फ़ेल-स्विच चलाता है।

import { createSignal } from '@reelkit/core';
import { cdnUrl } from '@reelkit/example-data';

// Stands in for your backend. The recipe only relies on the signature of
// `fetchPosts`: a page number in, a page of posts out, cancellable through an
// AbortSignal.

export interface Post {
  id: string;
  title: string;
  image: string;
}

const kPageSize = 6;
const kDelayMs = 800;
const kImages = Array.from(
  { length: 9 },
  (_, i) => `samples/images/image-${String(i + 1).padStart(2, '0')}.jpg`,
);

/**
 * Demo switch: while on, the next request fails, so the error slide can be
 * seen. A signal, so the switch shows when a request has used it up. Only the
 * demo on this page uses it: delete it, and the `@reelkit/core` import with
 * it, when you replace `fetchPosts` with your API.
 */
export const failNextRequest = createSignal(false);

export function fetchPosts(page: number, signal: AbortSignal): Promise<Post[]> {
  return new Promise((resolve, reject) => {
    const timer = setTimeout(() => {
      if (failNextRequest.value) {
        failNextRequest.value = false;
        reject(new Error('The feed could not be loaded.'));
        return;
      }
      resolve(
        Array.from({ length: kPageSize }, (_, i) => {
          const n = page * kPageSize + i;
          return {
            id: `post-${n}`,
            title: `Post ${n + 1}`,
            image: cdnUrl(kImages[n % kImages.length]),
          };
        }),
      );
    }, kDelayMs);

    signal.addEventListener(
      'abort',
      () => {
        clearTimeout(timer);
        reject(signal.reason);
      },
      { once: true },
    );
  });
}

ऊपर स्वाइप करें या ↓ दबाएँ: अंत से तीन पोस्ट पहले नया पेज आ जाता है। एरर स्लाइड और उसका Retry देखने के लिए "Fail next request" दबाएँ।

यह क्यों काम करता है

• गिनती बढ़ती है, स्लाइड नहीं। count पोस्ट की संख्या से एक ज़्यादा है, और DOM में हमेशा सिर्फ़ तीन स्लाइड रहती हैं, इसलिए हज़ारों पोस्ट वाली फ़ीड की लागत दस पोस्ट वाली फ़ीड जितनी ही है। देखें वर्चुअलाइज़ेशन।
• आख़िरी स्लाइड स्टेटस है। पोस्ट के बाद वाली अतिरिक्त स्लाइड पेज आते समय "Loading…" दिखाती है और फ़ेल होने पर Retry के साथ एरर, ताकि दर्शक कभी ख़ाली जगह में स्वाइप न करे। यह itemBuilder का बस एक और केस है, जो वही रेंडर करता है जो index के पीछे है।
• स्लाइड बदलने पर पहले से डेटा लाना। दर्शक के अंत से तीन पोस्ट दूर पहुँचते ही afterChange अगला पेज माँगता है। फ़ेल हुआ पेज Retry का इंतज़ार करता है, इसलिए आगे-पीछे स्वाइप करने से फ़ेल होने वाली रिक्वेस्ट दोबारा नहीं जाती। यह कॉलबैक React, Vue और Angular के बाक़ी इवेंट के साथ सूचीबद्ध है।
• key पोस्ट के साथ चलती है। keyExtractor हर पोस्ट का id लौटाता है, इसलिए पीछे नया पेज जुड़ने पर स्लाइड अपना एलिमेंट बनाए रखती है, index के आधार पर दोबारा नहीं बनती। यह React, Vue और Angular तीनों में एक prop है।
• इमेज अपनी स्लाइड से पहले लोड होती हैं। आगे वाली स्लाइड अभी माउंट नहीं होती, क्योंकि सिर्फ़ दिखने वाली रेंज माउंट होती है, जैसा वर्चुअलाइज़ेशन बताता है। इसलिए हर नए पेज की इमेज पेज आते ही माँग ली जाती हैं, और स्लाइड माउंट होने पर ब्राउज़र कैश से आती हैं।
• कुंजियाँ और व्हील जान-बूझकर बंद हैं। enableNavKeys पूरी विंडो पर सुनता है और enableWheel पॉइंटर फ़ीड पर रहने तक पेज का स्क्रॉल रोक लेता है। दोनों पूरी स्क्रीन वाली फ़ीड के लिए ठीक हैं और किसी पेज के अंदर रखी फ़ीड से टकराते हैं, जैसी यह है, इसलिए यहाँ ये बंद हैं और दो बटन Reel API पर prev() और next() कॉल करते हैं। स्वाइप दोनों हालात में काम करता है।
• फ़ीड के बाद कुछ नहीं बचता। हर रिक्वेस्ट के साथ एक AbortController जाता है, जो फ़ीड अनमाउंट होने पर abort हो जाता है, इसलिए देर से आया जवाब कभी हट चुकी फ़ीड में नहीं लिखता।