Next.js: File based dynamic routes does not re-use Apollo Client when switching between `page` and `page/[slug]`

[dan-cooke]

Bug report

Describe the bug

I'm unsure if this a bug with next or an issue with the with-apollo example.

But I cannot work out the difference between:

• Route from / to /about AND
• Route from /page to page/[id]

In my mind - the same sequence of events should occur.

But it appears that the latter is causing a full refresh of the app. A new server connection, and a new ApolloClient being created.

To Reproduce

1. Clone the reproduction repo
2. npm or yarn install
3. npm or yarn dev
4. Open localhost:3000/ and your developer console.
5. Navigate between Home , Client-Only , About and Offenses - note the output in the console.
6. Navigate to Offense 1

Expected behavior

• The Browser console should not be cleared
• The _same_ ApolloClient should be reused here

Screenshots

System information

• OS: macOS (Mojave 10.14.6)
• Browser: Chrome
• Version of Next.js: >= 9.x.x

[ijjk]

Hi, it looks like you aren't using the correct href and as. On this line you need to set href to /offenses/[id] and as to /offenses/1. This is due to href needing to point to the page and as points to what you want the page to appear as in the URL bar

See docs on dynamic routing here for more info