useSWRInfinite support arrays in an object

[tifa2UP]

Bug report

👋, I'm using useSWRInfinite to build infinite scrolling and saw that it doesn't support arrays that are nested in an object.

Description / Observed Behavior

For example, the API that I'm using does the following:

[api-url]/?page=1

{
 meta: {} //meta data
 array: {} // data for page 1
}

[api-url]/?page=2

{
 meta: {} //meta data
 array: {} // data for page 2
}

useSWRInfinite tries to append these two objects, which doesn't work, instead, it should attempt to append array of request 2 to array of request 1. There seems to be no way to support this atm.

Additional Context

SWR version: 0.3.0-beta.6

[tifa2UP]

To clarify, there are workarounds for it by modifying the fetcher function, though it would be nice to have it supported out of the box

[abdulazizalmalki-gh]

Thanks for the hint, this fixed my issue after 5 days of fighting it

[shuding]

I'd do this instead:

function usePagainatedUsers () {
  const { data } = useSWRInfinite(...)

  // we manually pick and concat the paginated data array
  const users = useMemo(() => 
    [].concat(...data.map(page => page.array)),
    [data]
  )

  return users
}

And use the usePagainatedUsers hook inside my components.

The reason that this lib can't simply support .array is that, every API has a different implementation. Some return the data array directly, some wrap it under a array field, and some use other properties.

Right now, it's better to leave the flexibility to the user IMO, until we have a better and more general idea.

I'll move this issue to discussion.

[florisdg]

I got inspired by your answer @shuding, but I wanted to take some data from the response headers and include it in the payload.

import { Cards } from '@typings/platform-api'
import { useMemo } from 'react'
import { Fetcher } from 'swr'
import useSWRInfinite from 'swr/infinite'

interface CardsTotalData {
  cards: Cards[]
  total: string | null
}

const getCards: Fetcher<CardsTotalData[], string> = async (url): Promise<CardsTotalData[]> => {
  const resp = await fetch(url, {
    method: 'GET',
  })

  return [{
    cards: await resp.json() as Cards[],
    total: resp.headers.get('x-total')
  }]
}

// Based off this example: https://swr.vercel.app/examples/infinite-loading
export default function useCardsInfinite(
  pageSize: number,
  keyword: string | undefined,
) {
  const {
    data,
    size,
    setSize,
    isValidating,
    isLoading,
    error,
  } = useSWRInfinite<CardsTotalData[]>(
    (page) => `/api/cards?start=${page === 0 ? page : page * pageSize}&pageSize=${pageSize}${keyword ? `&keyword=${keyword}` : ''}`,
    getCards,
    { initialSize: 1, revalidateOnFocus: false }
  )

  const { cards, total }  = useMemo(() => {
    if(data) {
      const flatData = [...data.flatMap((page) => page)]
      return {
        cards: [...flatData.map((page) => page.cards)],
        total: flatData[0].total
      }
    }
    return { cards: [], total: null }
  }, [data])

  const isEmpty = cards?.[0]?.length === 0

  return {
    cards: data ? ([] as Cards[]).concat(...cards) : [],
    cardsTotal: total,
    cardsSize: size,
    setCardsSize: setSize,
    cardsLoading: isLoading || (size > 0 && cards && typeof cards[size - 1] === 'undefined'),
    cardsReachedEnd: isEmpty || (cards && cards[cards.length - 1]?.length < pageSize),
    cardsRefreshing: isValidating && cards && cards.length === size,
    cardsErr: error,
  }
}

Perhaps this was also what you were looking for @bobbyrinaldy

[kurroo10]

Hi, i have similar issue, fot the data which is array, its solved. but how can i also keep the meta ?
the reason why i need the meta, sometimes people define the pages, total data, or something on it. i need to know how i can implemented it

thanks