useSWRInfinite multiple arguments like useSWR does

[RSchneider94]

Hi,

I've been using SWR for a while and following the docs I understood about sending multiple arguments like this ['/api/user', token] and it works pretty good until now for all of my apps.

Now I have to deal with a infinite loading and following the docs, I have tried to implement it the "same way" as useSWR, also, passing multiple args like this:

const { data, error, size, setSize } = useSWRInfinite(
  token ? [getKey, token] : null,
  fetcher
);

But sadly it's not even getting into getKey fn. I tried to do a console log just to check:

const getKey = (pageIndex, previousPageData) => {
    console.log('here?');
    // reached the end
    if (previousPageData && !previousPageData.data) return null;
    // first page, we don't have `previousPageData`
    if (pageIndex === 0) return '/customer_access';
    // add the cursor to the API endpoint
    return `/customer_access?last_slice=${pageIndex}`;
  };

Checking the example from docs in sandbox (https://codesandbox.io/s/swr-infinite-z6r0r?from-embed=&file=/src/App.js:355-369) if I try to modify to an array it's also not working. How could I do this in order to work?

Thanks!

[shuding]

Hi! The reason is that the first argument of useSWRInfinite has to be a function (but you are passing an array). You can make getKey return an array instead:

const { data, error, size, setSize } = useSWRInfinite(
  (pageIndex, previousPageData) => {
    if (!token) return null;

    // reached the end
    if (previousPageData && !previousPageData.data) return null;
    // first page, we don't have `previousPageData`
    if (pageIndex === 0) return ['/customer_access', token];
    // add the cursor to the API endpoint
    return [`/customer_access?last_slice=${pageIndex}`, token];
  },
  fetcher
);

[RSchneider94]

Hey @shuding thanks for your help!