In useSWRInfinite i want to get next page url along with data.

[varunkumargande]

let's assume my data is in this format
{
"count": 4,
"next": "http://localhost:8000/api/?page=2&id=102&paginate_by=2",
"previous": null,
"results": [
{
"id": 153,
"name": "pre workshop"
},
{
"id": 154,
"name": "workshop"
}
]
}

now if write code in this way, I don't have the option to store next page URL
const fetcher = url => axios.get(url).then(res => res.data);
const { data, error, mutate, size, setSize, isValidating } = useSWRInfinite(
index =>
https://api.github.com/repos/${repo}/issues?per_page=${PAGE_SIZE}&page=${index + 1},
fetcher
);

I want to store data.results in data array and also store next page URL.
how can I achieve that

[varunkumargande]

@shuding please help me out with this issue

I want my fetcher to be like this with arguments

const fetcher = url => axios.get(url).then(res =>
{
data = res.data.results;
next = res.data.next;
}
);

[shuding]

Please read the documentation: https://swr.vercel.app/docs/pagination#example-2-cursor-or-offset-based-paginated-api

There's a second argument for the getKey function: previousPageData. In your case just return the next endpoint URL based on that.

[varunkumargande]

Please read the documentation: https://swr.vercel.app/docs/pagination#example-2-cursor-or-offset-based-paginated-api

There's a second argument for the getKey function: previousPageData. In your case just return the next endpoint URL based on that.

if this is the data format
GET /users?cursor=123&limit=10
{
data: [
{ name: 'Alice' },
{ name: 'Bob' },
{ name: 'Cathy' },
...
],
nextCursor: 456
}

I want to concatenate data of first-page results with second-page results and so on ...

but in doc you are using map inside map like below.

{data.map((users, index) => {
// data is an array of each page's API response.
return users.map(user =>

{user.name}

)
})}
is map inside map is a right way to code?

and also can I pass URL via getKey like getKey(URL) ?

@shuding , @max please help me out with this
thanks in advance

[shuding]

@varunkumargande if you want to concatenate the data, you can do it after the hook call:

const { data } = useSWRInfinite(...)
const mergedData = data ? [].concat(data.map(item => item.results)) : []

[varunkumargande]

@varunkumargande if you want to concatenate the data, you can do it after the hook call:

const { data } = useSWRInfinite(...)
const mergedData = data ? [].concat(data.map(item => item.results)) : []

@shuding thanks, fixed my usecase