Next.js: withRouter query is undefined

[serranoarevalo]

Bug report

Describe the bug

I'm connecting a component to the router using withRouter, on the server side the router.query object is populated by the params on the URL like /post?id=1234 but on the front end, the query object is undefined for a moment and then populated again.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Clone: https://github.com/serranoarevalo/next-graph-pwa
2. Run yarn dev
3. Click on any of the categories
4. See the console for a log of the router.query as undefined and then populated.

Expected behavior

The router.query should be populated with what's on the URL

Screenshots

If applicable, add screenshots to help explain your problem.

System information

• OS: macOs
• Browser: Chrome
• Version of Next.js: 7.0.1

Additional context

If I refresh it works perfectly (SSR) but if I go to that page from another page the problem happens.

As you can see, it's undefined first and then it gets populated.

[johannesfritsch]

I have the exact same problem. To me it looks as if the router is not updated from the last page. router.asPage is still '/' when it should be /node/a?id=123123. On SSR everything works.

[ijjk]

@serranoarevalo I'm not able to reproduce this with the latest version of Next.js 8.0.3 Found the issue after removing your getInitialProps function

[ijjk]

After further investigation, this appears to be related to apollo and it calling getDataFromTree. I am not able to reproduce this behavior on a Next.js app not utilizing apollo so I am going to close this since there's not much I can do to fix this from our end.

It also seems to work fine using the query parameter from getInitialProps so I'd recommend that.

[serranoarevalo]

Thank you for investigating, I'm gonna report this issue to the Apollo team.

@ijjk What do you mean by 'using the query parameter from getInitialProps so I'd recommend that'

Does that work with Apollo?

[ijjk]

@serranoarevalo Like how you are doing here you can just pass down the id value to the components that need it for apollo and remove the withRouter HOC. When testing that value was always correct.

Here is a link to the getDataFromTree function that seems to be rendering the tree with the query value not being set.

[ijjk]

@serranoarevalo We actually might be able to fix this on our end I kept looking into how the with-apollo stuff is working and it appears this might be fixed when #6042 is addressed. I'm gonna keep this issue closed in favor of that one.

[serranoarevalo]

Cool! Thanks @ijjk

[designbyadrian]

I'm having this same issue with pretty basic NextJS setup. The query is filled in in getInitialProps, but not in subsequent checks to this.props.router.query.

[Bundas]

@designbyadrian did you find a solution?

[sboh1214]

@designbyadrian @Bundas Did you find a solution? I'm also having the same issue. (Inside apollo provider, I can't get this.props.router.query

[Dipeshlohani]

Still waiting for the solution.

[2b-dev]

I try to use
let partUrl = window.location.href;
let lastPath = partUrl.split("/").pop();
in Componentdidmout or useEffect
to get ID

[ctrlaltdylan]

Anything feasible for functional components? @2b-dev's solution will work, but it seems like the router should be handling this, not manual string splitting and searching.

[ctrlaltdylan]

Leaving my solution until the bug is addressed:

  const router = useRouter()
  const userId = router.query.userId;

    useEffect(() => {
        if(!checkId) {
          return;
        }
        // now userId is available.
        // make API call here
    }, [userId]);

[ahakem]

I fixed that by disable SSR for the component