with-apollo-auth: getDataFromTree returns an error during SSR with useRouter hook

[nikitowsky]

Error while running getDataFromTree TypeError: Cannot read property 'query' of null

Describe the bug

I tried to use latest dynamic router functionality next to apollo client (just updated next version in with-apollo-auth example). When I use useRouter hook and trying to load page via visiting dynamic page directly from browser (not via client routing) I get an error Error while running getDataFromTree TypeError: Cannot read property 'query' of null. If I use withRouter hoc - everything is ok!

To Reproduce

// Route like: /users/[user].tsx
import React from 'react';
import { useRouter } from 'next/router';

const UserInfo = (props) => {
  const router = useRouter();

  return <div>Hello {router.query.user}!</div>;
};

export default UserInfo;

Screenshots

System information

• OS: macOS
• Browser: Chrome
• Version of Next.js: [e.g. 8.1.1-canary.64]

[nikitowsky]

This happens probably because when I use useRouter hook, UserInfo component does not have 'router' prop on server yet while withRouter extends component on export.

[ijjk]

Hi, this is currently expected and is due to the difference in the way context is handled in withRouter vs. useRouter we are investigating handling this. Note: useRouter hasn't been documented as supported yet.

[jasonlor]

+1 I'm also seeing this issue.

[jesstelford]

Note: useRouter hasn't been documented as supported yet.

It looks like this has since been documented: https://nextjs.org/docs#userouter

My investigation

The values the hook use are setup here: https://github.com/zeit/next.js/blob/8078273a7f81e3fca499630138989a959639d32d/packages/next-server/server/render.tsx#L327-L341

However, those Context Providers are not wrapped around the App or Component passed to the loadGetInitialProps() call:

https://github.com/zeit/next.js/blob/8078273a7f81e3fca499630138989a959639d32d/packages/next-server/server/render.tsx#L344

A quick way to fix this might be to wrap the passed App in the Context Providers:

const InitialPropsApp = props => (
  <AppContainer>
    <App {...props} />
  </AppContainer>
);
InitialPropsApp.getInitialProps = App.getInitialProps;
props = await loadGetInitialProps(InitialPropsApp, { Component, router, ctx })

[timneutkens]

Explained why above solution won't work here: #7916 (comment)

[ajhool]

The above strategy did actually solve the problem for me. Then, in App, I use the useRouter value if available, otherwise I use the props.router:

const App = (props) => {
  const routerHook = useRouter();
  const router = (routerHook && routerHook.query) ? routerHook : props.router;

I'm not sure how robust this is or why this is the behavior, but it is a working hack for me as far as I can tell.

That being said, I am still having a bunch of issues with useRouter

[focux]

So, what's the recommended solution? Or should we go back to withRouter HOC?