Pagination adapter to Vercel `SWR` data fetching
npm install @faable/swr-pagination-adapterimport { useSWRPaginated } from "@faable/swr-pagination-adapter";
interface DataType {
name: string;
color: string;
}
const ListComponent = () => {
const { data, isReachingEnd, setSize } = useSWRPaginated<DataType>(
`/recipes?query=label:babies`,
{ pageSize: 5 }
);
return (
<>
{!data && <p>No Data</p>}
{data.map((obj) => (
<Item {...obj} />
))}
{!isReachingEnd && (
<button onClick={() => setSize(size + 1)}>Load more</button>
)}
</>
);
};Another example:
const ListComponent = () => {
const params = new URLSearchParams({ query: "label:babies" });
/*
const params2 = new URLSearchParams({
query:["label:babies","label:freeze"].join(" "),
category:"tag_XXXX"
});
*/
const { data, isReachingEnd, setSize } = useSWRPaginated<DataType>(
`/recipes?${params}`,
{ pageSize: 5 }
);
return (
<>
{!data && <p>No Data</p>}
{data.map((obj) => (
<Item {...obj} />
))}
{!isReachingEnd && (
<button onClick={() => setSize(size + 1)}>Load more</button>
)}
</>
);
};Important
You have to polyfill URL() module from node:url to use this package in react native.
Locate your JavaScript entry-point file, commonly called index.js at the root of your React Native project.
import "react-native-url-polyfill/auto";