question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

useInfinite calling getKey with undefined pageIndex and previousPageData beta 9

See original GitHub issue

Bug report

Description / Observed Behavior

When using beta 9 and calling useSWRInfinite((pageIndex, previousPageData) => ...dostuff) both parameters are showing up as undefined.

Expected Behavior

According to the types this should always return a number and the previous data or null.

Repro Steps / Code Example

I’m not sure what part of my code is causing this but I am using a provider.

            <SWRConfig
              value={{
                fetcher: axiosFetcher(client),
                cache: memoryCache,
              }}
            >

export const axiosFetcher =
  (client: AxiosInstance) =>
  async (url: string): Promise<State<any>> => {
    const resp = await client({
      method: 'get',
      url,
    });

    return createState(resp.data);
  };

export const { cache: memoryCache, mutate } = createCache(new Map());
useSWRInfinite<State<Pagination<Gift>>>(
    (pageIndex, previousPageData, ...args: any[]) => {
      return getKey(
        pageIndex,
        previousPageData,
        pageSize,
        orgName,
        campaignID,
        search
      );
    }
  );

Additional Context

SWR version. 1.0.0-beta.9 / 1.0.0-beta.8

I’m guessing something is going wrong with the middlewares. I think it’s just not calling the infinite middleware.

My suspicion comes from the fact that if I insert pageIndex = pageIndex ?? 0 into the getKey function it returns data, but that data is not an array. (acting like a normal useSWR call).

Trying to debug is crazy as well since all of the js in the package is minified. I think there was some function in the stack that had the middlewares set to something but I have no idea at what point.

It’s possible that the provider config isn’t being merged properly with the config that is adding the middleware with withMiddleware

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:2
  • Comments:7 (2 by maintainers)

github_iconTop GitHub Comments

3reactions
HeavenlyEntitycommented, Oct 7, 2021

Version of 1.0.1 same behavior with useSWRInfinite()

To note this issue is occurring on latest release v1.0.1. useSWRInfinite first arg as a type function in example of getKey() passes pageIndex & previousPageData as undefined. Downgrade to v0.5.6 this will fix the issue.

You can test this in their codesandbox by changing the version in package.json to v1.0.1 then to v0.5.6 then destruct the import.

1reaction
shudingcommented, Nov 30, 2021

OK, now I know why this is happening and why I cannot reproduce it. Since SWR 1.0.0, you have to import useSWRInfinite from 'swr/infinite' instead of 'swr':

- import { useSWRInfinite } from 'swr'
+ import useSWRInfinite from 'swr/infinite'

It’s mentioned here: https://swr.vercel.app/blog/swr-v1#update-useswrinfinite-imports as well as the docs.

Read more comments on GitHub >

github_iconTop Results From Across the Web

useSWRInfinite - getKey function always gets pageIndex as 1
It loads the 1st page correctly. However, when I click the 'Show More' button where I do onClick={() => setSize(size+1)}, the getKey ......
Read more >
swr - githubmemory
useInfinite calling getKey with undefined pageIndex and previousPageData beta 9. beetlebum ... Issue implementing custom cache in 1.0.0-beta.9.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found