I am trying to implement client side data fetching using swr in nextjs. I am able to display the data fetched using the useSWR hook fine in my desktop browser. I then serve the app on localhost from my desktop and try and test it on my mobile browser over wi-fi (both devices on the same network). The client fetched data is not displayed. Instead the <Error /> component is returned.
What could be possible reason(s) for this? I haven't really seen people bringing up a similar issue on the internet
in useSWRFetch.js
...
const fetcher = (...args) => axios.get(...args).then(res => res.data)
export const useSWRFetch = (url) => {
const { data, error } = useSWR(url, fetcher)
return { data, error }
}
in ClientFetchedComponent.js
...
export default function ClientFetchedComponent() {
const { data, error } = useSWRFetch(`http://localhost:8000/api/category/featured`)
if (error) return <Error />
return <div>
{ !data ?
<Loading /> :
data.results.map(item => {
return <div key={item.id}>
...
...
</div>
})
}
</div>
}
