getInitialProps called twice

[fat]

Hi,

I have the same issue as #524

Here's a bit more info if it's helpful…

I have a super basic express server with the following routes:

  server.get('/u/:username', (req, res) => {
    User.getByUsername(req.params.username, (err, user) => {
      if (err) …do error stuff…
      return app.render(req, res, '/profile', {
        user: user
      })
    })
  })

  server.get('*', (req, res) => {
    return handle(req, res)
  })

and then the following "profile" page component:

export default class extends React.Component {
  static getInitialProps ({ query: { user } }) {
    return { user }
  }

  render () {
    return (…)
  }
}

If i fetch /u/guille my server is correctly fetching the guillermo object and passing it down to my react component on first render…

However! once the javascript on the client loads - it is reinitializing the react component and calling getInitialProps a second time (this time with an empty user object, effectively wiping away all my data 😓).

Am I doing something wrong? Im a scrub so very possible.

[nkzawa]

@fat Is it possible to prepare a repository we can reproduce the issue ?

[fat]

hey @nkzawa yep!

Here's a github repo: https://github.com/fat/next.js-bug

seems to be somethign to do with nested data…

for example if the query data i pass is:

{ id: 'foo' } it's great.

if i pass { user: { id: 'foo' } } it causes the client to refresh and lose the initial render.

(thanks for taking a look! <3)

[fat]

ok… i think i was just misunderstanding how getIntitialProps is supposed to work…

i think im supposed to instead just pass the query string there of "username"… and then put the actual "fetch" of the data object in the getInitialProps method… which is my bad. (rather then what im doing, which is trying to fetch the data, then pass it down to get initial props).

[nkzawa]

@fat thank you, I can reproduce now.

I don't know why it occurs yet, but we don't support { user: { id: 'foo' } } since this is invalid as a parsed query string. It has to be { id: 'foo' }.

[fat]

yep makes sense