How do I rewrite from useSWRPages to useSWRInfinite?

[arielnmagno]

I wanted to upgrade from SWR 0.22 to 0.55 but useSWRPages is already deprecated so I would be forced to use useSWRInfinite but I have trouble understanding how to rewrite my current function to use useSWRInfinite. How do we convert useSWRPages to useSWRInfinite? Im totally new to SWR so please bear with me

function useRecentDevices(  
  deviceId: string | undefined,
  dateFromUtc: Date | undefined,
  dateToUtc: Date,
) {
  return useSWRPages<Pick<SummaryList, 'skip' | 'take'> | null, SummaryList>(
    'devices',
    ({ offset, withSWR }) => {
      const { data } = withSWR(
        useSWR(
          ['devices/recent', deviceId, offset?.skip, offset?.take ?? DEFAULT_TAKE],
          async (
            path: string,
            deviceId: string | undefined,    
            skip: number | undefined,
            take: number,
          ) => {
            const response = await get<SummaryList>(path, {
              deviceId,
              dateFromUtc: dateFromUtc?.toISOString(),
              dateToUtc: dateToUtc.toISOString(),
              skip,
              take,
            });
            if (!response.success) {
              throw new Error('unable to fetch data');
            }
            return response.data;
          },
          { suspense: !offset },
        ),
      );

      const devices = data?.devices;
      return devices ? devices.map(order => <DeviceLine key={order.deviceOrderId} {...order} />) : null;
    },
    ({ data }) => {
      const { hasMore, skip, take } = data!;

      if (hasMore) {
        return { skip: skip + take, take };
      }

      return null;
    },
    [deviceId, dateFromUtc, dateToUtc],
  );
}