Infinite scrolling component

Feed.tsx

import { gql, useQuery } from '@apollo/client'
import InfiniteScroll from 'react-infinite-scroll-component'

import { FeedQuery, FeedQueryVariables } from './__generated__/index.generated'

const FEED_QUERY = gql`
	query FeedQuery($first: Int, $after: ID) {
		feed(first: $first, after: $after) {
			edges {
				cursor
				node {
					image
					id
					user {
						username
					}
				}
			}
			pageInfo {
				endCursor
				hasNextPage
			}
		}
	}
`

export function Feed() {
	const { data, error, fetchMore } = useQuery<FeedQuery, FeedQueryVariables>(
		FEED_QUERY,
		{
			variables: { first: 5, after: null },
			notifyOnNetworkStatusChange: true,
			fetchPolicy: 'cache-first',
		}
	)

	if (error) {
		console.log(error.message)
		return <div>An error occurred</div>
	}
    
	if (!data) return <div>loading</div>

	return (
		<div className="bg-gray-800 px-4 py-6 shadow sm:p-6 sm:rounded-lg">
			<InfiniteScroll
				hasMore={data.feed.pageInfo.hasNextPage}
				next={async () =>
					await fetchMore({
						variables: {
							first: 5,
							after: data.feed.pageInfo.endCursor,
						},
					})
				}
				dataLength={data.feed.edges.length}
				loader={<h3>Loading</h3>}
			>
				{data?.feed.edges.map((edge) => (
					<li key={edge?.cursor} className="border-t border-b border-white">
						<div>{edge?.node.user.username}</div>
						<p>
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro
							tenetur explicabo rem molestias deleniti necessitatibus, fuga
							nihil, est nostrum tempore accusamus eveniet accusantium quaerat
							cumque illum laborum excepturi, officiis quos. Cumque obcaecati
							assumenda deleniti odio vero commodi quas beatae.
						</p>
					</li>
				))}
			</InfiniteScroll>
		</div>
	)
}