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.
0 comments:
Post a Comment
Thanks