Pages

30 May, 2023

I need a practical example for SWR with the fallback option

I'm trying to understand better how SWR works paired up with NextJS. I have over studied the example shown in the SWR - Next.JS SSG and SSR tab, but I am still confused as how to get the data from an external API: Why does the example from the hyperlink above uses '/api/article' as a key? Is the useSWR hook going to grab this key and navigate to this destination? Can I use an external API response such as "https://jsonplaceholder.typicode.com/posts"? What do I put as a value inside the fallback object? This is a simple snippet that I used to tinker with the fallback option. I do get a 1/4th of a second view of the data being displayed in the browser and it goes away turning into "John Doe". import useSWR from "swr" const fetcher = (...args) => fetch(...args).then(x=>x.json()) export default () =>{ const {data, error} = useSWR("/api/hello", fetcher, {fallback:{"/api/hello":{name:"foo bar" }}}) console.log(data) return {data && data.name} } I would like to see some other use cases where this feature would come in handy. If there's a link that I could get in order to understand this feature better, then that would be very beneficial to me. I also tried to explain in my words to see if there is a mistake in my knowledge and I could be corrected if my logic is wrong.

No comments:

Post a Comment

Thanks