useSWRInfinit previousPageData

[Michtz]

• I tried to implement an infinite scroll for my unsorted list. For this i used useSWRInfinit, but if i get to the end of the list, the hook doesn't
  load the following items in the list. (he loads the same items again).
  if I log the previousPageData => i get null or undefined (every time) and not the data of the previous Page.

• i read in the docs (https://swr.vercel.app/docs/pagination.en-US#useswrinfinite), but it only found that they say that SWR stores it internally.

• So why i never get the correct previousPageData or what is my mistake at this code?

• If i log the previousPageData i get first undefined and second (in the same interval) i get null.

• If i only use the getKey function and fake the arguments that i pass, it works correctly. But the useSWRInfinit don't save my data correctly.

• I used React.js, next.js(up to data) and the swr on version 2.2.0.

• This is my getKey function:
  const getKey = (_: number, previousPageData: AllRecords): Arguments => {
console.log('previousPageData', previousPageData); // Here i loged the Data
  const previousLast: number = previousPageData ? previousPageData.page.skip + previousPageData.page.results : 0;
const remainingEntries: number = previousPageData ? previousPageData.page.total - previousLast : 25;

  const skipTake: SkipTake = {
skip: previousLast,
take: previousPageData ? (remainingEntries > 25 ? 25 : remainingEntries) : 25,
};
return [ index.id, skipTake, 'records' ];
};

• and here the useSWRInfinit is called:

  const page: SWRInfiniteResponse<AllRecords, RequestError> = useSWRInfinite(getKey, getIndexRecords, {
suspense: true,
revalidateFirstPage: false,
use: [addAuth],
persistSize: false,
keepPreviousData: true,
});

  const { size, setSize, error, data, isValidating } = page;

  const records: AllRecords =
data.length === 0
? null
: page.data.reduce((acc: AllRecords, { items }: AllRecords) => {
return { ...acc, items: [...acc.items, ...items] };
});

  - // this is only for testing
const handleTestButton = (): void => {
setSize(size + 1);
};

  -// this should be the trigger
const handleScreenEnter = (): void => {
if (!isValidating) setSize(size + 1);
};

• here is the fetch:

  export const getIndexRecords = async (indexId: string, skipTake: SkipTake = {}): Promise<AllRecords> => {
try {
await axiosInstance.get(${masterdataApiUrl}/indices/${indexId}/records, {
headers: await withBearerToken(),
params: skipTake,
});
} catch (e) {
Logger.error('Unable to get all index records');
throw e;
}
};

• I loged the useSWRInfinit and the return value was correct
  console.log(
useSWRInfinite(getKey, getIndexRecords, {
suspense: true,
use: [addAuth],
})
);

• My name is Michael and I'm still new at programming and i don't get why this isn't working

[patricehotz]

I have the same Issue

[janfischer27]

Hope to find a solution soon...

[janfischer27]

Got this bug too...