Using Apollo GraphQL on _app.js

[andrenaught]

Feature request

Do server side rendering with GraphQL data to be displayed on all pages (using _app.js).
Sometimes there's data that I want to server side render throughout the entire app - _app.js (ex: dynamic content in the header). It seems the with-apollo example only works on pages. I'm assuming a certain Apollo config can make this happen? Can this be implemented in the with-apollo example?

[gfritzdev]

Are you using the hooks? I believe all queries will be SSR unless you specify ssr:false.

[rafaelalmeidatk]

You can't do it directly in _app.js since it is where you would define the provider, but you can add a component directly bellow ApolloProvider that will fetch the data from the GraphQL server, something like this (_app.js):

<ApolloProvider client={apolloClient}>
  <YourHeader /> // <- the component that will query the server
  <Component {...pageProps} />
</ApolloProvider>

The current example only works for pages because it is a better default since we can have SSR pages and auto static optimization, but you can see older versions where the provider was in _app: https://github.com/zeit/next.js/tree/a256270e15b62387936682f00448aaea99ec3ced/examples/with-apollo

That said, since using the ApolloProvider in _app will opt-out the entire app of auto static optimization, perhaps a better solution is to include the header on each page that needs it.

[macrozone]

You can't do it directly in _app.js since it is where you would define the provider, but you can add a component directly bellow ApolloProvider that will fetch the data from the GraphQL server, something like this (_app.js):

<ApolloProvider client={apolloClient}>
  <YourHeader /> // <- the component that will query the server
  <Component {...pageProps} />
</ApolloProvider>

The current example only works for pages because it is a better default since we can have SSR pages and auto static optimization, but you can see older versions where the provider was in _app: https://github.com/zeit/next.js/tree/a256270e15b62387936682f00448aaea99ec3ced/examples/with-apollo

That said, since using the ApolloProvider in _app will opt-out the entire app of auto static optimization, perhaps a better solution is to include the header on each page that needs it.

That is only true if you need static page optimization, which is just usable in simple applications. If you need for example to have apollo data within your ApplicationLayout, wrapping each and every page is not a good solution.

I get the feeling this static page optimization thing gets too much attention, while it is not useful for everyone using nextjs and its not a good idea, to make life for devs harder just to enforce a certain feature. /rantoff

@andrenaught the official example does not work anymore with an ApolloProvider in _app, you will lose SSR capabilities. I try to figure out how to solve that with the latest nextjs

[rafaelalmeidatk]

@macrozone The solution I mentioned does not consider auto static optimization, it will apply the header on all pages and disable the auto static optimization (I mentioned it at the end of the message). I also sent a link with the latest working version of the apollo example with _app.js.

[macrozone]

@rafaelalmeidatk i could successfuly use your example with next 9.2.0, thank you!

https://github.com/zeit/next.js/tree/a256270e15b62387936682f00448aaea99ec3ced/examples/with-apollo

[Timer]

While not suggested, you can wrap your custom app with withApollo as you would any other page.

[rafaelalmeidatk]

The current example doesn't support this tho: https://github.com/zeit/next.js/blob/canary/examples/with-apollo/lib/apollo.js#L35
That's why the suggestion was to use an early version of the example

[Timer]

@rafaelalmeidatk oh! I swore we added support for this.

Re-opened relevant PR: #8801

[thattimc]

Any chance for update typescript version of withApollo?

[LordZesus]

While not suggested, you can wrap your custom app with withApollo as you would any other page.

Why is this not suggested?

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.