Theo's Typesafe Cult•17mo ago

React Query, How to perform infiniteScrolling with custom variables

I'm using useInfiniteQuery, I basically want to load as you scroll down, but I also want to load data as you select on different filters. The way I implement it in Desktop View is using number pagination with useQuery is as follows useQuery(["key", page, showSelectedOptions]) This way when I click on the paginated number Example: Number 5 , page becomes 5 and loads new data, same thing when selected "options" But now I wanted to do in via scroll for Mobile View, so which means the newly recieved data should not override the previous data. Currently when any of the above variable changes, the previous 5 data gets overriden by the new set of 5 items, with useQuery and with useInfiniteQuery

6 Replies

Unknown User•17mo ago

Message Not Public

shaaah•17mo ago

Ah gotchya, Yes I can refetch the data, you are right. And I din't had to pass the currentPage like you mentioned, thanks for that tip. How about in case where I want to update, lets say a todo on click. but I dont want to update it via api instead I'll just listen to the success response and update it locally. I tried setQueryData(), but this din't seem to work actually. Found something interesting, So I'm transforming the data using the select, so instead of it returning pages and pageParams, I flaten the pages and return those two attributes + a new attribute named todo. Which works fine on useInfiniteQuery, but that attribute doesn't exist when using setQueryData

Unknown User•17mo ago

Message Not Public

shaaah•17mo ago

In my case the old does't seem to have the transformed data which is message, let me post an example

useInfiniteQuery(['key', id, name], ({ pageParam }) => fetchAPI(pageParam, id, name), {
   getNextPageParam: () => {},
   select: currData => {
      currData.pages.map(data => data.messages || []).flat();

      return {
         ...currData,
         messages: currData,
      };
   },
});

useInfiniteQuery(['key', id, name], ({ pageParam }) => fetchAPI(pageParam, id, name), {
   getNextPageParam: () => {},
   select: currData => {
      currData.pages.map(data => data.messages || []).flat();

      return {
         ...currData,
         messages: currData,
      };
   },
});

messages here doens't appear inside the old of setQueryData ohh I see, it is the same with useInfiniteQuery too? Cuz ever since I added that custom message attribute I'v been getting the error Property message does not exist on type InfiniteData<TQueryFnData> and I'm new to TS, so I just put any at the end of the line xD. I put as any

Unknown User•17mo ago

Message Not Public

shaaah•17mo ago

Right, Now I'm finally getting the hang of React query 😄 , thanks for your valuable informations

Gaming

Programming

React Query, How to perform infiniteScrolling with custom variables