CODEWITHSUNDEEP
javascriptreactjsreact-query
Jerin
Jerin

Reputation: 737

how to concat react-query previous data with new data

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

Upvotes: 0

Views: 4908

Answers (3)

TkDodo
TkDodo

Reputation: 28793

You are really looking for an infinite query - useInfiniteQuery is made for this exact use-case.

Upvotes: 3

james emanon
james emanon

Reputation: 11807

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.

Upvotes: 0

Yaseen Ahmed
Yaseen Ahmed

Reputation: 51

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 : )

Upvotes: -1

Related Questions