# How can i perform pagination or loadMore functionality in react native Flatlist with apollo client

**URL:** <https://community.apollographql.com/t/how-can-i-perform-pagination-or-loadmore-functionality-in-react-native-flatlist-with-apollo-client/5935>\
**Category:** Client SDKs\
**Tags:** client, web\
**Created:** [March 14, 2023, 11:24am UTC](https://community.apollographql.com/t/how-can-i-perform-pagination-or-loadmore-functionality-in-react-native-flatlist-with-apollo-client/5935 "2023-03-14T11:24:09Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ankitpanchal](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/ankitpanchal/32/4036_2.png) [@ankitpanchal](https://community.apollographql.com/u/ankitpanchal)\
**Post date:** [March 14, 2023, 11:24am UTC](https://community.apollographql.com/t/how-can-i-perform-pagination-or-loadmore-functionality-in-react-native-flatlist-with-apollo-client/5935/1 "2023-03-14T11:24:09Z")

</div>

Hi actually i want to load more data while i reach end of the flatlist , i tryed many thinks but still not able to complete is perfectly

here is my code to call API in first time  
const { loading, error, data, fetchMore } = useQuery(  
CollegeCardQueryTesting, {  
variables: {  
offset: 0,  
limit: 3,  
}  
}  
)  
the array starts from data?.college

and here is the code for the load more functionality

onEndReached={async () =\> {

```
                await fetchMore({
                    variables: { offSet: 5 },
                    updateQuery: (previousResult, { fetchMoreResult }) => {
                        console.log(previousResult);
                        // Don't do anything if there weren't any new items
                        if (!fetchMoreResult || fetchMoreResult.length === 0) {
                            return previousResult;
                        }

                        //Concating the new data with previous Data
                        ConcatedData = previousResult?.College?.concat(fetchMoreResult?.College);

                        console.log(ConcatedData);

                        return {
                            data: ConcatedData
                        };
                    },
                });
            }}

```

, please focus on it and give me the solution of these problem

---

<div class="post-metadata">

**Author:** ![lenz](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/lenz/32/4007_2.png) [@lenz](https://community.apollographql.com/u/lenz)\
**Post date:** [March 14, 2023, 12:11pm UTC](https://community.apollographql.com/t/how-can-i-perform-pagination-or-loadmore-functionality-in-react-native-flatlist-with-apollo-client/5935/2 "2023-03-14T12:11:01Z")

</div>

You are changing the result shape from

```auto
{
  // potentially other values
  College: [...]
}

```

to

```auto
{
  // all other values removed
  data: [...]
}

```

Instead, do

```auto
                        return {
                            ...previousResult,
                            College: ConcatedData
                        };

```

---

<div class="post-metadata">

**Author:** ![Justin\_Gonzalez](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/justin_gonzalez/32/5359_2.png) [@Justin\_Gonzalez](https://community.apollographql.com/u/Justin_Gonzalez)\
**Post date:** [February 6, 2025, 8:49pm UTC](https://community.apollographql.com/t/how-can-i-perform-pagination-or-loadmore-functionality-in-react-native-flatlist-with-apollo-client/5935/3 "2025-02-06T20:49:21Z")

</div>