Swr: Pagination example fails in CRA with "'useSWR' cannot be called inside a callback" error

[pushred]

I'm having trouble using (either) pagination example in a Create React App project. As far as I can see my code tracks with the examples, reduced some here:

import useSWR, { useSWRPages } from 'swr';

function List({ query }) {
  const {
    pages,
    isLoadingMore,
    isReachingEnd,
    loadMore
  } = useSWRPages(
    'example',

    ({ offset, withSWR }) => {
      const { data: resource, error } = withSWR(
        useSWR('/data')
      );

      if (!resource) return null;
      if (error) throw new Error(error);

      return resource.data.map(item => (
        <Item key={item.id} {...item} />
      ));
    },

    (SWR, index) => {
      return 1;
    },

    []
  );

  return pages;
}
...

Running this I get an error overlay:

./src/app/example.js
 Line 71:9:   React Hook "useSWR" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function  react-hooks/rules-of-hooks

---

• [email protected]
• [email protected]
• [email protected]

[shuding]

Currently we don't have a good way to avoid that, maybe you can disable eslint for that specific line as a temporary fix:

      // eslint-disable-next-line react-hooks/rules-of-hooks
      const { data: resource, error } = withSWR(
        useSWR('/data')
      );

[aequasi]

Maybe have withSWR use the first arg as a callback @quietshu ?

const {data, error} = withSWR((useSWR) => 
    useSWR('/data');
);

[pushred]

@quietshu thank you for the quick response!

I had to move the eslint comment but confirming this works for now:

const { data: resource, error } = withSWR(
  // eslint-disable-next-line react-hooks/rules-of-hooks
  useSWR('/data')
);

[Aryan-mor]

I have this problem :(

[FrankFang]

Is there a plan to fix this?
To temporarily avoid the error, I rename useSWR to swr.

import swr, {useSWRPages} from 'swr';

It's tricky.

[shuding]

The new pagination API has launched: https://swr.vercel.app/docs/pagination. Feel free to reopen if you are still encountering an issue!