Struggling to Get Infinite Scrolling To Work
Unanswered
Eurasian Collared-Dove posted this in #help-forum
Original message was deleted.
4 Replies
Eurasian Collared-Dove
Inside of my index file I have this snippet of code:
//This is the actual call to start the infinite scroll
function RecentTweets() {
const tweets = api.tweet.infiniteFeed.useInfiniteQuery({}, {getNextPageParam: lastPage => {lastPage.nextCursor; console.log(lastPage.nextCursor)}}); //If this can print from inside the return statement, it isn't, so maybe this line is f-ed up? I'm not sure the exact way useInfiniteQuery is used because this is my first time seeing it?
return <InfiniteTweetList
tweets={tweets.data?.pages.flatMap((page) => page.tweets)}
isError={tweets.isError}
isLoading={tweets.isLoading}
hasMore={tweets.hasNextPage} //This argument is throwing a type error boolean | undefined cannot be assigned to boolean, but his file also has an error here and it works? so could or could not be the issue?
fetchNewTweets={tweets.fetchNextPage} />
}Finally the InfiniteTweetList is it's own component declared as such:
import Link from "next/link"
import InfiniteScroll from "react-infinite-scroll-component"
import { ProfileImage } from "./ProfileImage"
import { useSession } from "next-auth/react"
import { VscHeartFilled, VscHeart } from "react-icons/vsc"
import { IconHoverEffect } from "./IconHoverEffect"
type Tweet = {
id: string
content: string
createdAt: Date
likeCount: number
likedByMe: boolean
user: { id: string; image: string | null; name: string | null}
}
type InfiniteTweetListProps = {
isLoading: boolean
isError: boolean
hasMore: boolean //This property is odd
fetchNewTweets: () => Promise<unknown>
tweets?: Tweet[]
}
export function InfiniteTweetList({tweets, isError, isLoading, fetchNewTweets, hasMore}: InfiniteTweetListProps) {
if(isLoading) return <h1>Loading...</h1>
if(isError) return <h1>Error Loading Tweet</h1>
if(tweets == null || tweets.length == 0) {
return <h1 className="my-4 text-center text-2xl text-gray-500">There's Nothing Here...</h1>
}
return <ul>
<InfiniteScroll
dataLength={tweets.length}
next={fetchNewTweets}
hasMore={hasMore}
loader={"Loading..."}>
{tweets.map(tweet => {
return <TweetCard key={tweet.id} {...tweet} />
})}
</InfiniteScroll>
</ul>
}
//...To my knowledge the rest of the code in this function is visual and controls for the tweet, doesn't actually relate to pulling the tweets or infinite scroll
}I know this question is damn lengthy but I'm really not sure what's happening and why this isn't working, again any and all help is very greatly appreciated!
I think the cursor isn't getting updated, but I don't understand why