So I have been stuck on this feature for a while, I'm trying to implement pagination in a data that is being fetched from a 3rd party API which is constantly changing, the thing about this API is the calls can only be made on the server, client side fetching is not permitted.
So I've figured out how to use SWR hook to update my data constantly but however I'm unable to configure a pagination option, I've managed to make it work on the client side but I cannot get it working on the server side.
This is what my code so far is like, it works on the local host but on production it gives out cors errors and the api calls dont work,
const SWRTest = () => {
const [page, setPage] = useState(1);
const { data, error } = useSWR(
`https://exampleapi.co/matches/upcoming?sort=&page=${page}&per_page=30&token=#`,
fetcher
);
console.log(data)
console.log(page)
if (error) return <div>Something went wrong...</div>
if (!data) return <div>Loading...</div>
return (
<ul role="list">
<button
onClick={() => setPage(page - 1)}
>
Previous
</button>
<button
onClick={() => setPage(page + 1)}
>
Next
</button>
{data &&
data.map((game) => (
<li key={game.id}>{game.name}</li>
))}
</ul>
)
}
export default SWRTest
Errors -
Access to XMLHttpRequest at 'https://api.example.co/matches/upcoming?sort=&page=1&per_page=30&token=#' from origin 'https://riffyraff.me' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
GET https://api.example.co/matches/upcoming?sort=&page=1&per_page=30&token=# net::ERR_FAILED 200
I think the API call is being blocked cause its being made on the client side which is not allowed by the API provider.
