How to implement infinite list using React Query in react native with Flatlist

user_5742004 0
Viewed 709

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>
  );
}

The problem i am facing is when the page loads the api calls one by one with unique next ids or page param. What i was trying to implement is , when user reaches the end of the page (onEndReached) the data needs to be fetched with a new page param.

react-query react-native reactjs
1 Answers

getNextPageParam return the value for the next page. So you don't need pass pageParam in fetchNextPage unless you want overwrite, for any reason, the next page value.

You can add a hasNextPage validation for unnecessary requests.

 const {data, isLoading, hasNextPage, fetchNextPage} = useInfiniteQuery( /* your code */ )
 const getMore = () => {
    if(hasNextPage)
      fetchNextPage();
  };
user_121428990
Related