Next.js: Router query object not immediately populated from dynamic route params

[majelbstoat]

Bug report

The router query object is not populated immediately from dynamic route params on either the server or the client.

Describe the bug

The example for Dynamic routing shows using useRouter() to extract a query param to use for rendering. However, on the server, and on client first load, query is an empty object.

This becomes a problem when relying on the param to do anything more than display it - for example using swr to retrieve data based on it.

It's also unexpected, because it appears to be information that is knowable immediately, given either a req or a window.location.

To Reproduce

Example repro:

// [id].tsx
const TestPage: NextPage = () => {
  const router = useRouter()
  const { query } = router
  const id = query.id
  console.log('Props', process.browser, router)

  return <h1>ID: {id}</h1>
}

Actual behaviour

Visiting /42

There is one entry in the server log:

Props false undefined

The component runs twice on the client, with two entries in the client console:
Props true undefined
Props true 42

Expected behavior

I expect query to be populated the first time I call useRouter().

I expect a server log of Props false 42.

I expect the function to render once on the client, with one entry in the console: Props true 42

System information

• Version of Next.js: 9.3.1

[majelbstoat]

Interestingly, if I define a getServersideProps – even one that doesn't do anything – query is populated on both the server and the client first load. Is this to do with ASO, perhaps? If so, we might just need clearer documentation or worked examples of how to safely hybridise a page.

In particular, we can't conditionally call useSWR, for example, because react complains about differing orders of hooks being executed. And calling useSWR with the wrong URL is not an option.

[lifeiscontent]

reproduction: https://codesandbox.io/s/inspiring-feather-uxeph

[VinSpee]

I bumped into this today as well, and tried withRouter as well, but it behaves the same.

[steida]

My temporal workaround:

const withRouterFix = (
  WrappedComponent: FC<{ router: NextRouter }>,
  filter: (query: ParsedUrlQuery) => boolean,
) => () => {
  const router = useRouter();
  if (filter(router.query)) return null;
  return <WrappedComponent router={router} />;
};

const PageID: FC<{ router: NextRouter }> = withRouterFix(
  ({ router }) => {
  },
  (query) => !query.id,

[Timer]

Duplicate of #11484

Fix in #9370

[majelbstoat]

@Timer, is adding a no-op getServersideProps() the suggested way to disable ASO? This adds a bunch of complexity to pages on dynamic routes when ASO is enabled. (I know getStaticProps is a thing, but many kinds of dynamic page can't be properly populated at build time, and it seems like a common pattern to retrieve data based on the route param.)

[Timer]

Adding a no-op getServerSideProps is not the suggested way of working around this, though, it'd work. You should really defer the data fetching until the router is ready, as will be made easy via #9370 (if you rely on query information).

[majelbstoat]

I'm using SWR for data fetching. I can't useSWR inside useEffect, and I can't conditionally call useSWR (both due to rules of hooks).

[Timer]

Can you please share your useSWR component?

[majelbstoat]

A simplified version looks like:

const ProfilePage = ({query}: Props) => {
  const { username } = query
  const { data: user } = useSwr(`/api/v1/users/${username}`) 

  if (!user) return null
  return <div>{user.name}</div>
}

which gives 404s as it tries to load from /api/v1/undefined. (fetcher is set in SWRConfig higher up). (Same deal if I pass ['/api/v1/users/', username] to SWR.)

Really, if query isn't going to be ready on first load (which again, it does seem knowable immediately), then this page is not suitable for ASO (as most of my pages are not), but I can't seem to disable it other than through GSSP.

[Timer]

This should work:

const ProfilePage = ({ query }: Props) => {
  const { username } = query;
  const { data: user } = useSwr(() =>
    username ? `/api/v1/users/${username}` : false
  );

  if (!user) return null;
  return <div>{user.name}</div>;
};

[majelbstoat]

Cool, thank you 🙂

[steida]

A little workaround:

const useRouterWithQueryReady = (): NextRouter & { queryReady: boolean } => {
  const router = useRouter();
  const queryReady =
    Object.keys(router.query)
      // Server uses amp prop for some reason.
      .filter((k) => k != 'amp').length > 0;
  return { ...router, queryReady };
};

[peterpoe]

If you are using TypeScript, the key function must return null:

const { data: store } = useSWR<Store>(() => (id ? `stores/${id}` : null), fetch)