How to implement infinite list with Flatlist in react native

[aravi365]

Here is my code:

import React, {useState} from 'react';
import {useQuery, useInfiniteQuery} from 'react-query';
import {getMeetup} from '../../api/methods/getMeetups';

export default function MyFunction(props) {
  const [next, setNext] = useState('');

  const fetchData = async ({pageParam = ''}) => {
    const response = await getMeetup( pageParam);
    console.log('API RESP', response);
    return response;
  };

  const {data, isLoading, fetchNextPage} = useInfiniteQuery(
    'myData',
    fetchData,
    {
      getNextPageParam: (lastPage, pages) => lastPage?.next?._id,
    },
  );

  console.log('RQUERY CHECK', data);


  const getMore = () => {
    console.log('data end', data?.pages[0]?.next?._id);
    fetchNextPage({pageParam: data?.pages[0]?.next?._id});
  };

 const flattenData = data?.pages
    ? data?.pages?.flatMap((page) => [...page.Docs])
    : [];

  return (
    <View>
      <FlatList
        style={{
          marginBottom: verticalScale(40),
          paddingHorizontal: scale(15),
        }}
        data={flattenData}
        keyExtractor={(item) => item._id}
        renderItem={({item, index}) => {
          return <ListItem data={item} index={index} />;
        }}
        onEndReachedThreshold={0.1}
        onEndReached={getMore}
      />
    </View>
  );
}

This is my first try with React Query. The problem i am facing is when the page loads the api calls one by one with unique next ids. What i was trying to implement is , when user reaches the end of the page (onEndReached) the data needs to be fetched. Can somebody help me with this implementation?