I have a hook, if I scroll down it will call for new data as like infinite scroll, but when I scroll down it calls the API for new data but it is removing the previous data. I want to concat with previous data. I think it is possible by the select method of react query but how can I get the previous data
const useActivityFeedData = (
activityFeedPageIndex: number,
pageSize = Config.defaultPageSize,
) =>
useQuery(
[ACTIVITY_FEED, activityFeedPageIndex],
() => Api.user.getActivityFeedData(activityFeedPageIndex, pageSize),
{
initialData: {
activityList: [],
},
keepPreviousData: true,
select: (res: any) => ({
activityList: res.activityList,
}),
},
);
Just create a array on mounting of component like this,
let [data, setData] = useState([])
useEffect(()=>{
},[])
Now get axios in same useEffect
useEffect(()=>{
let data = []
axios.get(`....`).then(res=>{
setData(res.data)
})
},[])
Now after scrolling when u get new Data, just concat it to previous array.
eg: axios.get(`...`).then(res=>{
let var = data.concat(res.data)
setData(var)
})
Then when u map Data, as it updates the page keeps scrolling.
Hope this helps : )
Why not something like:
const useActivityFeedData = (
activityFeedPageIndex: number,
pageSize = Config.defaultPageSize,
) =>
const prevData = queryClient.getQueryData([ACTIVITY_FEED,activityFeedPageIndex]).
useQuery(
[ACTIVITY_FEED, activityFeedPageIndex],
() => Api.user.getActivityFeedData(activityFeedPageIndex, pageSize),
{
initialData: {
activityList: [],
},
keepPreviousData: true,
select: (res: any) => ({
activityList: res.activityList,
}),
},
);
and then just return the prevData with your resposnse or assign the response to a variable from useQuery, and return it.
You are really looking for an infinite query - useInfiniteQuery is made for this exact use-case.