Next.js Discord

Discord Forum

Struggling to Get Infinite Scrolling To Work

Unanswered
Eurasian Collared-Dove posted this in #help-forum
Open in Discord
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