如何将反应查询以前的数据与新数据连接起来

Question

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

Answer 1

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

Answer 2

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.

Answer 3

您确实在寻找无限查询- useInfiniteQuery是为这个确切的用例而设计的。