data becomes undefined (empty array) after re-renders in Next.js

[AlexTechNoir]

Good day, everyone! :)

I'm not sure if problem's related to SWR, but it happened after I migrated from ^0.5.6 to ^1.0.1 ver. the day before.

I have an article page where I fetch article on server-side in getStaticProps, pass it as props to page and set it as fallbackData.

pages/articles/[slug].js:

...
export default function Article({ article }) {
  const fallbackData = article
  
  const { data, error } = useSWR(url, url => fetch(url).then(res => res.json()),
    { 
      fallbackData,
      revalidateOnFocus: false,
      revalidateOnReconnect: false
    }
  )
  
  console.log(article, fallbackData, data)
...

The page loads successfully but after a moment it becomes blank and says that data's undefined:

Console shows that the data object becomes empty after re-renders (unlike article and fallbackData objects):

When I downgrade SWR to ^0.5.6 everything is okay.

Does anybody know why is it like that?

[shuding]

Hi! The screenshots are broken, but can you put a logger here:

url => fetch(url).then(res => res.json()).then(data => {
  console.log(data)
  return data
})

And you will probably see that the fetched data is an empty array. It's not undefined.

This is the correct behavior, for the initial render there is no data, so SWR returns the fallback. And then SWR fetches the data (gets an empty array), and returns that data instead of the fallback.

[AlexTechNoir]

Thank you, Shu! 👍 Solved!

The problem was that in getStaticProps I used params.slug for query parameter and on page I used article.slug. They have identical data, but when I query HCMS with slug filter it returns an array of objects instead of one object like with other queries, so params is an object, but article is an array with 1 object. That's why on page data was empty.