Next.js: With Apollo: Fetching client-side when using router.pathname

Created on 3 Nov 2017 · 5Comments · Source: vercel/next.js

[x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

I expected the data fetching to happen server-side on first load and be cached

Current Behavior

Data is fetched by the client (I see the network request) on first load

Steps to Reproduce (for bugs)

Decorate an inner component (in my case, the header) with "withRouter"
Use router.pathname.
In my case const activeItem = router.pathname to set active item on menu
Now, using the lib of the with-apollo example (initApollo and withData) data is fetched client-side.

If I remove that line everything is ok and I don't see any client-side fetching.

Thank you,
Matteo

Source

f2net

Most helpful comment

If you're following the with-apollo example you'll need to include router in the context of getDataFromTree otherwise withRouter won't find the router in the context when rendering on the server.

I got it working using:

const url = { query: ctx.query, pathname: ctx.pathname, asPath: ctx.asPath }

try {
  await getDataFromTree(
    <ApolloProvider client={apollo}>
      <BaseComponent url={url} {...initialProps} />
    </ApolloProvider>,
    { router: url },
  )
} catch (error) {
  console.warn(error)
}

Notice how { router: url } is passed as the second argument to getDataFromTree

simenbrekken on 6 Nov 2017

👍2

All 5 comments

@ads1018

timneutkens on 4 Nov 2017

If you're following the with-apollo example you'll need to include router in the context of getDataFromTree otherwise withRouter won't find the router in the context when rendering on the server.

I got it working using:

const url = { query: ctx.query, pathname: ctx.pathname, asPath: ctx.asPath }

try {
  await getDataFromTree(
    <ApolloProvider client={apollo}>
      <BaseComponent url={url} {...initialProps} />
    </ApolloProvider>,
    { router: url },
  )
} catch (error) {
  console.warn(error)
}

Notice how { router: url } is passed as the second argument to getDataFromTree

simenbrekken on 6 Nov 2017

👍2

Thank you! It works! :)

f2net on 6 Nov 2017

🎉1

@simenbrekken that's neat. I didn't know getDataFromTree accepted a second argument.

adamsoffer on 6 Nov 2017

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.