import React from 'react'; import Link from 'next/link'; import axios from 'axios'; import { useInView } from 'react-intersection-observer'; import { useInfiniteQuery, QueryClient, QueryClientProvider, } from '@tanstack/react-query'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import { useWindowVirtualizer } from '@tanstack/react-virtual'; const queryClient = new QueryClient(); function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } const randomHeight = (() => { const cache = new Map(); return (id) => { const value = cache.get(id); if (value !== undefined) { return value; } const v = getRandomInt(25, 125); cache.set(id, v); return v; }; })(); let prevId = 0; export default function App() { return ( ); } function Example() { const beforeInView = useInView(); const afterInView = useInView(); const { status, data, error, isFetching, isFetchingNextPage, isFetchingPreviousPage, fetchNextPage, fetchPreviousPage, hasNextPage, hasPreviousPage, } = useInfiniteQuery({ queryKey: ['projects'], queryFn: async ({ pageParam }) => { const res = await axios.get('/api/projects?cursor=' + pageParam); return res.data; }, initialPageParam: 0, getPreviousPageParam: (firstPage) => firstPage.previousId ?? undefined, getNextPageParam: (lastPage) => lastPage.nextId ?? undefined, }); React.useEffect(() => { if (beforeInView.inView) { fetchPreviousPage(); } }, [fetchPreviousPage, beforeInView.inView]); React.useEffect(() => { if (afterInView.inView) { fetchNextPage(); } }, [fetchNextPage, afterInView.inView]); const itemSize = 100; const getData = React.useCallback( () => data?.pages.flatMap((page) => page.data) ?? [], [data] ); const projects = getData(); const virtualizer = useWindowVirtualizer({ count: projects.length, scrollMargin: 100, // FIXME estimateSize: () => itemSize, overscan: 5, gap: 32, getItemKey: React.useCallback((index) => getData()[index].id, [getData]), // debug: true }); const firstId = data?.pages[0].nextId ?? 0; const addedToTheBeginning = firstId < prevId; prevId = firstId; if (addedToTheBeginning) { const offset = virtualizer.scrollOffset + (data?.pages[0].data ?? []).length * (itemSize + virtualizer.options.gap); virtualizer.scrollOffset = offset; virtualizer.calculateRange(); virtualizer.scrollToOffset(offset, { align: 'start' }); } return (

Infinite Loading

{status === 'pending' ? (

) : status === 'error' ? ( Error: {error.message} ) : ( <>

{virtualizer.getVirtualItems().map((item) => { const project = projects[item.index]; return (

{project.name}

); })}

{isFetching && !isFetchingNextPage ? 'Background Updating...' : null}

)}

Go to another page

); }

Sunbelt Computer Software

PL/B Language Development and Support