Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make withApollo work with _app.js components #8801

Merged
merged 5 commits into from Feb 7, 2020

Conversation

HaNdTriX
Copy link
Contributor

@HaNdTriX HaNdTriX commented Sep 19, 2019

Motivation

Since we changed the withApollo HOC, there have been a lot of requests, regarding using the old pattern (wrapping _app.js). Even though it disables project wide automatic static optimization.

Since it is quite easy to detect if someone wraps an AppComponent or an PageComponent we should allow both methods. In addition to that it is much easier to migrate between both approaches if the HOC supports both.

This PR allows using the withApollo hoc in both ways:

A. withApollo(PageComponent)

pages/index.js

import { withApollo } from '../lib/apollo'

export default withApollo(() => (
  <div>I've got apollo context! </div>
))

B. withApollo(App) or withApollo(CustomApp)

Disables project wide automatic static optimization. Therefore a devonly warning is logged to the console:

You are using the "withApollo" HOC on "_app.js" level. Please note that this disables project wide automatic static optimization. Better wrap your PageComponents directly.

pages/_app.js

import App from 'next/app'
import { withApollo } from '../lib/apollo'
export default withApollo(App)

Related

#8770, #8691

Added value

  • Easier migration path.
  • More flexible.
  • ssr: false on _app.js would allows project wide static optimization
  • Still enforces best practice (by using an console warning)

Status: Waiting for feedback

@HaNdTriX HaNdTriX force-pushed the examples/apollo-app-js branch 2 times, most recently from 32e50ad to c755afa Compare September 19, 2019 14:57
@ijjk
Copy link
Member

ijjk commented Sep 19, 2019

Stats from current PR

Default Server Mode (Decrease detected ✓)
General Overall decrease ✓
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
buildDuration 15.7s 15.8s ⚠️ +120ms
nodeModulesSize 48.4 MB 48.4 MB -1.69 kB
Client Bundles (main, webpack, commons)
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
main-HASH.js 18.3 kB 18.3 kB
main-HASH.js gzip 6.64 kB 6.64 kB
webpack-HASH.js 1.53 kB 1.53 kB
webpack-HASH.js gzip 746 B 746 B
4952ddcd88e7..2b8407376.js 21.9 kB 21.9 kB
4952ddcd88e7..7376.js gzip 7.81 kB 7.81 kB
de003c3a9d30..3fa59b1f5.js 43.1 kB 43.1 kB
de003c3a9d30..b1f5.js gzip 15.5 kB 15.5 kB
framework.5b..dbaff70d3.js 125 kB 125 kB
framework.5b..70d3.js gzip 39.4 kB 39.4 kB
Overall change 210 kB 210 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
main-HASH.module.js 16.5 kB 16.5 kB
main-HASH.module.js gzip 6.39 kB 6.39 kB
webpack-HASH.module.js 1.53 kB 1.53 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..4b.module.js 45.5 kB 45.5 kB
de003c3a9d30..dule.js gzip 16.5 kB 16.5 kB
framework.5b..d3.module.js 125 kB 125 kB
framework.5b..dule.js gzip 39.4 kB 39.4 kB
Overall change 189 kB 189 kB
Client Pages
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_app.js 1.81 kB 1.81 kB
_app.js gzip 873 B 873 B
_error.js 12 kB 12 kB
_error.js gzip 4.73 kB 4.73 kB
hooks.js 12.7 kB 12.7 kB
hooks.js gzip 4.79 kB 4.79 kB
index.js 318 B 318 B
index.js gzip 222 B 222 B
link.js 8.14 kB 8.14 kB
link.js gzip 3.5 kB 3.5 kB
routerDirect.js 408 B 408 B
routerDirect.js gzip 281 B 281 B
withRouter.js 419 B 419 B
withRouter.js gzip 280 B 280 B
Overall change 35.8 kB 35.8 kB
Client Pages Modern
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_app.module.js 1.7 kB 1.7 kB
_app.module.js gzip 832 B 832 B
_error.module.js 23.3 kB 23.3 kB
_error.module.js gzip 8.59 kB 8.59 kB
hooks.module.js 1.52 kB 1.52 kB
hooks.module.js gzip 793 B 793 B
index.module.js 294 B 294 B
index.module.js gzip 223 B 223 B
link.module.js 8.53 kB 8.53 kB
link.module.js gzip 3.68 kB 3.68 kB
routerDirect.module.js 394 B 394 B
routerDirect..dule.js gzip 281 B 281 B
withRouter.module.js 404 B 404 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 36.1 kB 36.1 kB
Client Build Manifests
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_buildManifest.js 81 B 81 B
_buildManifest.js gzip 61 B 61 B
_buildManifest.module.js 81 B 81 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 162 B 162 B
Rendered Page Sizes
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
index.html 3.62 kB 3.62 kB
index.html gzip 947 B 947 B
link.html 3.66 kB 3.66 kB
link.html gzip 955 B 955 B
withRouter.html 3.67 kB 3.67 kB
withRouter.html gzip 943 B 943 B
Overall change 10.9 kB 10.9 kB

Serverless Mode (Decrease detected ✓)
General Overall decrease ✓
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
buildDuration 15.7s 16s ⚠️ +252ms
nodeModulesSize 48.4 MB 48.4 MB -1.69 kB
Client Bundles (main, webpack, commons)
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
main-HASH.js 18.3 kB 18.3 kB
main-HASH.js gzip 6.64 kB 6.64 kB
webpack-HASH.js 1.53 kB 1.53 kB
webpack-HASH.js gzip 746 B 746 B
4952ddcd88e7..2b8407376.js 21.9 kB 21.9 kB
4952ddcd88e7..7376.js gzip 7.81 kB 7.81 kB
de003c3a9d30..3fa59b1f5.js 43.1 kB 43.1 kB
de003c3a9d30..b1f5.js gzip 15.5 kB 15.5 kB
framework.5b..dbaff70d3.js 125 kB 125 kB
framework.5b..70d3.js gzip 39.4 kB 39.4 kB
Overall change 210 kB 210 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
main-HASH.module.js 16.5 kB 16.5 kB
main-HASH.module.js gzip 6.39 kB 6.39 kB
webpack-HASH.module.js 1.53 kB 1.53 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..4b.module.js 45.5 kB 45.5 kB
de003c3a9d30..dule.js gzip 16.5 kB 16.5 kB
framework.5b..d3.module.js 125 kB 125 kB
framework.5b..dule.js gzip 39.4 kB 39.4 kB
Overall change 189 kB 189 kB
Client Pages
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_app.js 1.81 kB 1.81 kB
_app.js gzip 873 B 873 B
_error.js 12 kB 12 kB
_error.js gzip 4.73 kB 4.73 kB
hooks.js 12.7 kB 12.7 kB
hooks.js gzip 4.79 kB 4.79 kB
index.js 318 B 318 B
index.js gzip 222 B 222 B
link.js 8.14 kB 8.14 kB
link.js gzip 3.5 kB 3.5 kB
routerDirect.js 408 B 408 B
routerDirect.js gzip 281 B 281 B
withRouter.js 419 B 419 B
withRouter.js gzip 280 B 280 B
Overall change 35.8 kB 35.8 kB
Client Pages Modern
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_app.module.js 1.7 kB 1.7 kB
_app.module.js gzip 832 B 832 B
_error.module.js 23.3 kB 23.3 kB
_error.module.js gzip 8.59 kB 8.59 kB
hooks.module.js 1.52 kB 1.52 kB
hooks.module.js gzip 793 B 793 B
index.module.js 294 B 294 B
index.module.js gzip 223 B 223 B
link.module.js 8.53 kB 8.53 kB
link.module.js gzip 3.68 kB 3.68 kB
routerDirect.module.js 394 B 394 B
routerDirect..dule.js gzip 281 B 281 B
withRouter.module.js 404 B 404 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 36.1 kB 36.1 kB
Client Build Manifests
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_buildManifest.js 81 B 81 B
_buildManifest.js gzip 61 B 61 B
_buildManifest.module.js 81 B 81 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 162 B 162 B
Serverless bundles
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_error.js 249 kB 249 kB
_error.js gzip 66.5 kB 66.5 kB
hooks.html 3.75 kB 3.75 kB
hooks.html gzip 980 B 980 B
index.js 249 kB 249 kB
index.js gzip 66.8 kB 66.8 kB
link.js 257 kB 257 kB
link.js gzip 68.8 kB 68.8 kB
routerDirect.js 250 kB 250 kB
routerDirect.js gzip 66.8 kB 66.8 kB
withRouter.js 250 kB 250 kB
withRouter.js gzip 66.9 kB 66.9 kB
Overall change 1.26 MB 1.26 MB

Commit: 9297526

@ijjk
Copy link
Member

ijjk commented Sep 19, 2019

Stats from current PR

Default Server Mode
General
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
buildDuration 13.3s 12.8s -430ms
nodeModulesSize 48.4 MB 48.4 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
main-HASH.js 18.3 kB 18.3 kB
main-HASH.js gzip 6.64 kB 6.64 kB
webpack-HASH.js 1.53 kB 1.53 kB
webpack-HASH.js gzip 746 B 746 B
4952ddcd88e7..2b8407376.js 21.9 kB 21.9 kB
4952ddcd88e7..7376.js gzip 7.81 kB 7.81 kB
de003c3a9d30..3fa59b1f5.js 43.1 kB 43.1 kB
de003c3a9d30..b1f5.js gzip 15.5 kB 15.5 kB
framework.5b..dbaff70d3.js 125 kB 125 kB
framework.5b..70d3.js gzip 39.4 kB 39.4 kB
Overall change 210 kB 210 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
main-HASH.module.js 16.5 kB 16.5 kB
main-HASH.module.js gzip 6.39 kB 6.39 kB
webpack-HASH.module.js 1.53 kB 1.53 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..4b.module.js 45.5 kB 45.5 kB
de003c3a9d30..dule.js gzip 16.5 kB 16.5 kB
framework.5b..d3.module.js 125 kB 125 kB
framework.5b..dule.js gzip 39.4 kB 39.4 kB
Overall change 189 kB 189 kB
Client Pages
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_app.js 1.81 kB 1.81 kB
_app.js gzip 873 B 873 B
_error.js 12 kB 12 kB
_error.js gzip 4.73 kB 4.73 kB
hooks.js 12.7 kB 12.7 kB
hooks.js gzip 4.79 kB 4.79 kB
index.js 318 B 318 B
index.js gzip 222 B 222 B
link.js 8.14 kB 8.14 kB
link.js gzip 3.5 kB 3.5 kB
routerDirect.js 408 B 408 B
routerDirect.js gzip 281 B 281 B
withRouter.js 419 B 419 B
withRouter.js gzip 280 B 280 B
Overall change 35.8 kB 35.8 kB
Client Pages Modern
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_app.module.js 1.7 kB 1.7 kB
_app.module.js gzip 832 B 832 B
_error.module.js 23.3 kB 23.3 kB
_error.module.js gzip 8.59 kB 8.59 kB
hooks.module.js 1.52 kB 1.52 kB
hooks.module.js gzip 793 B 793 B
index.module.js 294 B 294 B
index.module.js gzip 223 B 223 B
link.module.js 8.53 kB 8.53 kB
link.module.js gzip 3.68 kB 3.68 kB
routerDirect.module.js 394 B 394 B
routerDirect..dule.js gzip 281 B 281 B
withRouter.module.js 404 B 404 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 36.1 kB 36.1 kB
Client Build Manifests
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_buildManifest.js 81 B 81 B
_buildManifest.js gzip 61 B 61 B
_buildManifest.module.js 81 B 81 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 162 B 162 B
Rendered Page Sizes
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
index.html 3.62 kB 3.62 kB
index.html gzip 947 B 947 B
link.html 3.66 kB 3.66 kB
link.html gzip 955 B 955 B
withRouter.html 3.67 kB 3.67 kB
withRouter.html gzip 943 B 943 B
Overall change 10.9 kB 10.9 kB

Serverless Mode
General
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
buildDuration 13.4s 13.4s -1ms
nodeModulesSize 48.4 MB 48.4 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
main-HASH.js 18.3 kB 18.3 kB
main-HASH.js gzip 6.64 kB 6.64 kB
webpack-HASH.js 1.53 kB 1.53 kB
webpack-HASH.js gzip 746 B 746 B
4952ddcd88e7..2b8407376.js 21.9 kB 21.9 kB
4952ddcd88e7..7376.js gzip 7.81 kB 7.81 kB
de003c3a9d30..3fa59b1f5.js 43.1 kB 43.1 kB
de003c3a9d30..b1f5.js gzip 15.5 kB 15.5 kB
framework.5b..dbaff70d3.js 125 kB 125 kB
framework.5b..70d3.js gzip 39.4 kB 39.4 kB
Overall change 210 kB 210 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
main-HASH.module.js 16.5 kB 16.5 kB
main-HASH.module.js gzip 6.39 kB 6.39 kB
webpack-HASH.module.js 1.53 kB 1.53 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..4b.module.js 45.5 kB 45.5 kB
de003c3a9d30..dule.js gzip 16.5 kB 16.5 kB
framework.5b..d3.module.js 125 kB 125 kB
framework.5b..dule.js gzip 39.4 kB 39.4 kB
Overall change 189 kB 189 kB
Client Pages
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_app.js 1.81 kB 1.81 kB
_app.js gzip 873 B 873 B
_error.js 12 kB 12 kB
_error.js gzip 4.73 kB 4.73 kB
hooks.js 12.7 kB 12.7 kB
hooks.js gzip 4.79 kB 4.79 kB
index.js 318 B 318 B
index.js gzip 222 B 222 B
link.js 8.14 kB 8.14 kB
link.js gzip 3.5 kB 3.5 kB
routerDirect.js 408 B 408 B
routerDirect.js gzip 281 B 281 B
withRouter.js 419 B 419 B
withRouter.js gzip 280 B 280 B
Overall change 35.8 kB 35.8 kB
Client Pages Modern
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_app.module.js 1.7 kB 1.7 kB
_app.module.js gzip 832 B 832 B
_error.module.js 23.3 kB 23.3 kB
_error.module.js gzip 8.59 kB 8.59 kB
hooks.module.js 1.52 kB 1.52 kB
hooks.module.js gzip 793 B 793 B
index.module.js 294 B 294 B
index.module.js gzip 223 B 223 B
link.module.js 8.53 kB 8.53 kB
link.module.js gzip 3.68 kB 3.68 kB
routerDirect.module.js 394 B 394 B
routerDirect..dule.js gzip 281 B 281 B
withRouter.module.js 404 B 404 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 36.1 kB 36.1 kB
Client Build Manifests
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_buildManifest.js 81 B 81 B
_buildManifest.js gzip 61 B 61 B
_buildManifest.module.js 81 B 81 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 162 B 162 B
Serverless bundles
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_error.js 249 kB 249 kB
_error.js gzip 66.5 kB 66.5 kB
hooks.html 3.75 kB 3.75 kB
hooks.html gzip 980 B 980 B
index.js 249 kB 249 kB
index.js gzip 66.8 kB 66.8 kB
link.js 257 kB 257 kB
link.js gzip 68.8 kB 68.8 kB
routerDirect.js 250 kB 250 kB
routerDirect.js gzip 66.8 kB 66.8 kB
withRouter.js 250 kB 250 kB
withRouter.js gzip 66.9 kB 66.9 kB
Overall change 1.26 MB 1.26 MB

Commit: c755afa

@ijjk
Copy link
Member

ijjk commented Sep 19, 2019

Stats from current PR

Default Server Mode
General
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
buildDuration 16s 16.1s ⚠️ +132ms
nodeModulesSize 48.4 MB 48.4 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
main-HASH.js 18.3 kB 18.3 kB
main-HASH.js gzip 6.64 kB 6.64 kB
webpack-HASH.js 1.53 kB 1.53 kB
webpack-HASH.js gzip 746 B 746 B
4952ddcd88e7..2b8407376.js 21.9 kB 21.9 kB
4952ddcd88e7..7376.js gzip 7.81 kB 7.81 kB
de003c3a9d30..3fa59b1f5.js 43.1 kB 43.1 kB
de003c3a9d30..b1f5.js gzip 15.5 kB 15.5 kB
framework.5b..dbaff70d3.js 125 kB 125 kB
framework.5b..70d3.js gzip 39.4 kB 39.4 kB
Overall change 210 kB 210 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
main-HASH.module.js 16.5 kB 16.5 kB
main-HASH.module.js gzip 6.39 kB 6.39 kB
webpack-HASH.module.js 1.53 kB 1.53 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..4b.module.js 45.5 kB 45.5 kB
de003c3a9d30..dule.js gzip 16.5 kB 16.5 kB
framework.5b..d3.module.js 125 kB 125 kB
framework.5b..dule.js gzip 39.4 kB 39.4 kB
Overall change 189 kB 189 kB
Client Pages
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_app.js 1.81 kB 1.81 kB
_app.js gzip 873 B 873 B
_error.js 12 kB 12 kB
_error.js gzip 4.73 kB 4.73 kB
hooks.js 12.7 kB 12.7 kB
hooks.js gzip 4.79 kB 4.79 kB
index.js 318 B 318 B
index.js gzip 222 B 222 B
link.js 8.14 kB 8.14 kB
link.js gzip 3.5 kB 3.5 kB
routerDirect.js 408 B 408 B
routerDirect.js gzip 281 B 281 B
withRouter.js 419 B 419 B
withRouter.js gzip 280 B 280 B
Overall change 35.8 kB 35.8 kB
Client Pages Modern
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_app.module.js 1.7 kB 1.7 kB
_app.module.js gzip 832 B 832 B
_error.module.js 23.3 kB 23.3 kB
_error.module.js gzip 8.59 kB 8.59 kB
hooks.module.js 1.52 kB 1.52 kB
hooks.module.js gzip 793 B 793 B
index.module.js 294 B 294 B
index.module.js gzip 223 B 223 B
link.module.js 8.53 kB 8.53 kB
link.module.js gzip 3.68 kB 3.68 kB
routerDirect.module.js 394 B 394 B
routerDirect..dule.js gzip 281 B 281 B
withRouter.module.js 404 B 404 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 36.1 kB 36.1 kB
Client Build Manifests
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_buildManifest.js 81 B 81 B
_buildManifest.js gzip 61 B 61 B
_buildManifest.module.js 81 B 81 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 162 B 162 B
Rendered Page Sizes
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
index.html 3.62 kB 3.62 kB
index.html gzip 947 B 947 B
link.html 3.66 kB 3.66 kB
link.html gzip 955 B 955 B
withRouter.html 3.67 kB 3.67 kB
withRouter.html gzip 943 B 943 B
Overall change 10.9 kB 10.9 kB

Serverless Mode
General
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
buildDuration 15.9s 15.7s -124ms
nodeModulesSize 48.4 MB 48.4 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
main-HASH.js 18.3 kB 18.3 kB
main-HASH.js gzip 6.64 kB 6.64 kB
webpack-HASH.js 1.53 kB 1.53 kB
webpack-HASH.js gzip 746 B 746 B
4952ddcd88e7..2b8407376.js 21.9 kB 21.9 kB
4952ddcd88e7..7376.js gzip 7.81 kB 7.81 kB
de003c3a9d30..3fa59b1f5.js 43.1 kB 43.1 kB
de003c3a9d30..b1f5.js gzip 15.5 kB 15.5 kB
framework.5b..dbaff70d3.js 125 kB 125 kB
framework.5b..70d3.js gzip 39.4 kB 39.4 kB
Overall change 210 kB 210 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
main-HASH.module.js 16.5 kB 16.5 kB
main-HASH.module.js gzip 6.39 kB 6.39 kB
webpack-HASH.module.js 1.53 kB 1.53 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..4b.module.js 45.5 kB 45.5 kB
de003c3a9d30..dule.js gzip 16.5 kB 16.5 kB
framework.5b..d3.module.js 125 kB 125 kB
framework.5b..dule.js gzip 39.4 kB 39.4 kB
Overall change 189 kB 189 kB
Client Pages
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_app.js 1.81 kB 1.81 kB
_app.js gzip 873 B 873 B
_error.js 12 kB 12 kB
_error.js gzip 4.73 kB 4.73 kB
hooks.js 12.7 kB 12.7 kB
hooks.js gzip 4.79 kB 4.79 kB
index.js 318 B 318 B
index.js gzip 222 B 222 B
link.js 8.14 kB 8.14 kB
link.js gzip 3.5 kB 3.5 kB
routerDirect.js 408 B 408 B
routerDirect.js gzip 281 B 281 B
withRouter.js 419 B 419 B
withRouter.js gzip 280 B 280 B
Overall change 35.8 kB 35.8 kB
Client Pages Modern
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_app.module.js 1.7 kB 1.7 kB
_app.module.js gzip 832 B 832 B
_error.module.js 23.3 kB 23.3 kB
_error.module.js gzip 8.59 kB 8.59 kB
hooks.module.js 1.52 kB 1.52 kB
hooks.module.js gzip 793 B 793 B
index.module.js 294 B 294 B
index.module.js gzip 223 B 223 B
link.module.js 8.53 kB 8.53 kB
link.module.js gzip 3.68 kB 3.68 kB
routerDirect.module.js 394 B 394 B
routerDirect..dule.js gzip 281 B 281 B
withRouter.module.js 404 B 404 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 36.1 kB 36.1 kB
Client Build Manifests
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_buildManifest.js 81 B 81 B
_buildManifest.js gzip 61 B 61 B
_buildManifest.module.js 81 B 81 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 162 B 162 B
Serverless bundles
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_error.js 249 kB 249 kB
_error.js gzip 66.5 kB 66.5 kB
hooks.html 3.75 kB 3.75 kB
hooks.html gzip 980 B 980 B
index.js 249 kB 249 kB
index.js gzip 66.8 kB 66.8 kB
link.js 257 kB 257 kB
link.js gzip 68.8 kB 68.8 kB
routerDirect.js 250 kB 250 kB
routerDirect.js gzip 66.8 kB 66.8 kB
withRouter.js 250 kB 250 kB
withRouter.js gzip 66.9 kB 66.9 kB
Overall change 1.26 MB 1.26 MB

Commit: a4b02bd

@ijjk
Copy link
Member

ijjk commented Sep 21, 2019

Stats from current PR

Default Server Mode
General
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
buildDuration 15.5s 15.6s ⚠️ +120ms
nodeModulesSize 48.4 MB 48.4 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
main-HASH.js 18.3 kB 18.3 kB
main-HASH.js gzip 6.64 kB 6.64 kB
webpack-HASH.js 1.53 kB 1.53 kB
webpack-HASH.js gzip 746 B 746 B
4952ddcd88e7..2b8407376.js 21.9 kB 21.9 kB
4952ddcd88e7..7376.js gzip 7.81 kB 7.81 kB
de003c3a9d30..62a1c6978.js 43.2 kB 43.2 kB
de003c3a9d30..6978.js gzip 15.5 kB 15.5 kB
framework.5b..dbaff70d3.js 125 kB 125 kB
framework.5b..70d3.js gzip 39.4 kB 39.4 kB
Overall change 210 kB 210 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
main-HASH.module.js 16.5 kB 16.5 kB
main-HASH.module.js gzip 6.39 kB 6.39 kB
webpack-HASH.module.js 1.53 kB 1.53 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..6b.module.js 45.6 kB 45.6 kB
de003c3a9d30..dule.js gzip 16.5 kB 16.5 kB
framework.5b..d3.module.js 125 kB 125 kB
framework.5b..dule.js gzip 39.4 kB 39.4 kB
Overall change 189 kB 189 kB
Client Pages
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_app.js 1.81 kB 1.81 kB
_app.js gzip 873 B 873 B
_error.js 12 kB 12 kB
_error.js gzip 4.73 kB 4.73 kB
hooks.js 12.7 kB 12.7 kB
hooks.js gzip 4.79 kB 4.79 kB
index.js 318 B 318 B
index.js gzip 222 B 222 B
link.js 8.14 kB 8.14 kB
link.js gzip 3.5 kB 3.5 kB
routerDirect.js 408 B 408 B
routerDirect.js gzip 281 B 281 B
withRouter.js 419 B 419 B
withRouter.js gzip 280 B 280 B
Overall change 35.8 kB 35.8 kB
Client Pages Modern
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_app.module.js 1.7 kB 1.7 kB
_app.module.js gzip 832 B 832 B
_error.module.js 23.3 kB 23.3 kB
_error.module.js gzip 8.59 kB 8.59 kB
hooks.module.js 1.52 kB 1.52 kB
hooks.module.js gzip 793 B 793 B
index.module.js 294 B 294 B
index.module.js gzip 223 B 223 B
link.module.js 8.53 kB 8.53 kB
link.module.js gzip 3.68 kB 3.68 kB
routerDirect.module.js 394 B 394 B
routerDirect..dule.js gzip 281 B 281 B
withRouter.module.js 404 B 404 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 36.1 kB 36.1 kB
Client Build Manifests
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_buildManifest.js 81 B 81 B
_buildManifest.js gzip 61 B 61 B
_buildManifest.module.js 81 B 81 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 162 B 162 B
Rendered Page Sizes
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
index.html 3.62 kB 3.62 kB
index.html gzip 948 B 948 B
link.html 3.66 kB 3.66 kB
link.html gzip 956 B 956 B
withRouter.html 3.67 kB 3.67 kB
withRouter.html gzip 944 B 944 B
Overall change 10.9 kB 10.9 kB

Serverless Mode
General
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
buildDuration 15.9s 16.2s ⚠️ +301ms
nodeModulesSize 48.4 MB 48.4 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
main-HASH.js 18.3 kB 18.3 kB
main-HASH.js gzip 6.64 kB 6.64 kB
webpack-HASH.js 1.53 kB 1.53 kB
webpack-HASH.js gzip 746 B 746 B
4952ddcd88e7..2b8407376.js 21.9 kB 21.9 kB
4952ddcd88e7..7376.js gzip 7.81 kB 7.81 kB
de003c3a9d30..62a1c6978.js 43.2 kB 43.2 kB
de003c3a9d30..6978.js gzip 15.5 kB 15.5 kB
framework.5b..dbaff70d3.js 125 kB 125 kB
framework.5b..70d3.js gzip 39.4 kB 39.4 kB
Overall change 210 kB 210 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
main-HASH.module.js 16.5 kB 16.5 kB
main-HASH.module.js gzip 6.39 kB 6.39 kB
webpack-HASH.module.js 1.53 kB 1.53 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..6b.module.js 45.6 kB 45.6 kB
de003c3a9d30..dule.js gzip 16.5 kB 16.5 kB
framework.5b..d3.module.js 125 kB 125 kB
framework.5b..dule.js gzip 39.4 kB 39.4 kB
Overall change 189 kB 189 kB
Client Pages
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_app.js 1.81 kB 1.81 kB
_app.js gzip 873 B 873 B
_error.js 12 kB 12 kB
_error.js gzip 4.73 kB 4.73 kB
hooks.js 12.7 kB 12.7 kB
hooks.js gzip 4.79 kB 4.79 kB
index.js 318 B 318 B
index.js gzip 222 B 222 B
link.js 8.14 kB 8.14 kB
link.js gzip 3.5 kB 3.5 kB
routerDirect.js 408 B 408 B
routerDirect.js gzip 281 B 281 B
withRouter.js 419 B 419 B
withRouter.js gzip 280 B 280 B
Overall change 35.8 kB 35.8 kB
Client Pages Modern
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_app.module.js 1.7 kB 1.7 kB
_app.module.js gzip 832 B 832 B
_error.module.js 23.3 kB 23.3 kB
_error.module.js gzip 8.59 kB 8.59 kB
hooks.module.js 1.52 kB 1.52 kB
hooks.module.js gzip 793 B 793 B
index.module.js 294 B 294 B
index.module.js gzip 223 B 223 B
link.module.js 8.53 kB 8.53 kB
link.module.js gzip 3.68 kB 3.68 kB
routerDirect.module.js 394 B 394 B
routerDirect..dule.js gzip 281 B 281 B
withRouter.module.js 404 B 404 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 36.1 kB 36.1 kB
Client Build Manifests
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_buildManifest.js 81 B 81 B
_buildManifest.js gzip 61 B 61 B
_buildManifest.module.js 81 B 81 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 162 B 162 B
Serverless bundles
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_error.js 249 kB 249 kB
_error.js gzip 66.5 kB 66.5 kB
hooks.html 3.75 kB 3.75 kB
hooks.html gzip 981 B 981 B
index.js 249 kB 249 kB
index.js gzip 66.9 kB 66.9 kB
link.js 257 kB 257 kB
link.js gzip 68.9 kB 68.9 kB
routerDirect.js 250 kB 250 kB
routerDirect.js gzip 66.9 kB 66.9 kB
withRouter.js 250 kB 250 kB
withRouter.js gzip 67 kB 67 kB
Overall change 1.26 MB 1.26 MB

Commit: 18f7000

@lfades
Copy link
Member

lfades commented Oct 7, 2019

@HaNdTriX I'm still having trouble finding out how is this useful. We don't want users to use Apollo in _app. This PR is allowing it with a warning, why use a warning in an example instead of showing the best way of doing it?.

Both the related issues can be solved and are better without _app

@lfades lfades closed this Oct 7, 2019
@adamsoffer
Copy link
Contributor

adamsoffer commented Nov 1, 2019

@lfades - one use case I can see for this is accessing data inside a layout component. Persistent layout components are defined outside of pages and thus are not able to query data via apollo. This is actually an issue I'm running into now. What's the escape hatch here other than using Apollo in _app? Using this persistent layout pattern by the way.

@HaNdTriX
Copy link
Contributor Author

HaNdTriX commented Nov 2, 2019

@adamsoffer I have to admit that I agree with @ifades.
Nevertheless I created the PR above to give people the chance to have an easier migration path.

Feel free to use the following code:

https://github.com/HaNdTriX/next.js/blob/examples/apollo-app-js/examples/with-apollo/lib/apollo.js

It allows you to use withApollo in _AppComponents or PageComonents.
But be warned this might disable project wide automatic static optimization.

Have a nice day!

@adamsoffer
Copy link
Contributor

adamsoffer commented Nov 2, 2019

@HaNdTriX I definitely agree too. But there's definitely a use case (as described above) that it doesn't cover. Say I have a sidebar component as part of my persistent layout defined outsides of pages, and I need data in that sidebar, what are my options besides disabling project wide automatic static optimization in _app.js?

@nelsieborja
Copy link

@HaNdTriX that works thanks. In my case, I am using App for persisting some layouts which require the apolloClient, so I needed your solution.

@matepaiva
Copy link

I really would like that someone who defends not using Apollo in _app.js to tell us how to handle the use case above referenced by @adamsoffer.

@HaNdTriX
Copy link
Contributor Author

@matepaiva I recommend not using _app.js for layout stuff at all.

Check out the following example for an alternative:
https://github.com/zeit/next.js/tree/canary/examples/layout-component

@adamsoffer
Copy link
Contributor

adamsoffer commented Dec 19, 2019

@HaNdTriX that example doesn't exhibit a persistent layout. See this example -> https://adamwathan.me/2019/10/17/persistent-layout-patterns-in-nextjs/

In nextjs, at least at the moment, you have to use _app.js to implement persistent layouts.

@macrozone
Copy link

@HaNdTriX that example doesn't exhibit a persistent layout. See this example -> https://adamwathan.me/2019/10/17/persistent-layout-patterns-in-nextjs/

In nextjs, at least at the moment, you have to use _app.js to implement persistent layouts.

yeah, totally agree

@matepaiva I recommend not using _app.js for layout stuff at all.

Check out the following example for an alternative:
https://github.com/zeit/next.js/tree/canary/examples/layout-component

this leads to tons uf uneeded re-renderings, doesn't it?

@macrozone
Copy link

so where do we go from here? it seems like either we have to sacrifice performance or we have to add a ton of boilerplate. I don't care about automatic static optimization. as it is only useful in some niche use cases (imho).

It's perfectly valid to have one ApolloProvider for your entire app. it does not make sense to have one for every page. In particular, if you need data in your layout, for example a navigation from a cms, things get really nasty. In this case one ApolloProvider in _app is the only solution that makes sense.

@HaNdTriX
Copy link
Contributor Author

@macrozone feel free to use the following code: https://github.com/HaNdTriX/next.js/blob/examples/apollo-app-js/examples/with-apollo/lib/apollo.js

It supports apollo on app level. You might have to maintain it on your own, since I prefer a little boilerplate over flexibility. In the end we are talking about three explicit lines of code :).

@Timer Timer reopened this Feb 3, 2020
@Timer Timer added this to the 9.2.2 milestone Feb 3, 2020
@Timer Timer added the area: examples Anything inside the examples folder label Feb 3, 2020
@ijjk
Copy link
Member

ijjk commented Feb 5, 2020

Stats from current PR

Default Server Mode
General
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
buildDuration 12.1s 12.4s ⚠️ +290ms
nodeModulesSize 52.6 MB 52.6 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
main-HASH.js gzip 5.12 kB 5.12 kB
webpack-HASH.js gzip 746 B 746 B
4952ddcd88e7..54d3.js gzip 4.68 kB 4.68 kB
commons.HASH.js gzip 4.06 kB 4.06 kB
de003c3a9d30..c4ea.js gzip 13.6 kB 13.6 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 67.4 kB 67.4 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
main-HASH.module.js gzip 4.12 kB 4.12 kB
webpack-HASH..dule.js gzip 746 B 746 B
4952ddcd88e7..dule.js gzip 5.56 kB 5.56 kB
de003c3a9d30..dule.js gzip 12.4 kB 12.4 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 62 kB 62 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
polyfills-HASH.js gzip 4.76 kB 4.76 kB
Overall change 4.76 kB 4.76 kB
Client Pages
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_app.js gzip 1.15 kB 1.15 kB
_error.js gzip 4.07 kB 4.07 kB
hooks.js gzip 779 B 779 B
index.js gzip 222 B 222 B
link.js gzip 2.89 kB 2.89 kB
routerDirect.js gzip 283 B 283 B
withRouter.js gzip 282 B 282 B
Overall change 9.68 kB 9.68 kB
Client Pages Modern
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_app.module.js gzip 576 B 576 B
_error.module.js gzip 3.06 kB 3.06 kB
hooks.module.js gzip 371 B 371 B
index.module.js gzip 212 B 212 B
link.module.js gzip 2.46 kB 2.46 kB
routerDirect..dule.js gzip 273 B 273 B
withRouter.m..dule.js gzip 272 B 272 B
Overall change 7.22 kB 7.22 kB
Client Build Manifests
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
index.html gzip 1.02 kB 1.02 kB
link.html gzip 1.03 kB 1.03 kB
withRouter.html gzip 1.01 kB 1.01 kB
Overall change 3.06 kB 3.06 kB

Serverless Mode
General
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
buildDuration 12.6s 12.6s -41ms
nodeModulesSize 52.6 MB 52.6 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
main-HASH.js gzip 5.12 kB 5.12 kB
webpack-HASH.js gzip 746 B 746 B
4952ddcd88e7..54d3.js gzip 4.68 kB 4.68 kB
commons.HASH.js gzip 4.06 kB 4.06 kB
de003c3a9d30..c4ea.js gzip 13.6 kB 13.6 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 67.4 kB 67.4 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
main-HASH.module.js gzip 4.12 kB 4.12 kB
webpack-HASH..dule.js gzip 746 B 746 B
4952ddcd88e7..dule.js gzip 5.56 kB 5.56 kB
de003c3a9d30..dule.js gzip 12.4 kB 12.4 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 62 kB 62 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
polyfills-HASH.js gzip 4.76 kB 4.76 kB
Overall change 4.76 kB 4.76 kB
Client Pages
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_app.js gzip 1.15 kB 1.15 kB
_error.js gzip 4.07 kB 4.07 kB
hooks.js gzip 779 B 779 B
index.js gzip 222 B 222 B
link.js gzip 2.89 kB 2.89 kB
routerDirect.js gzip 283 B 283 B
withRouter.js gzip 282 B 282 B
Overall change 9.68 kB 9.68 kB
Client Pages Modern
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_app.module.js gzip 576 B 576 B
_error.module.js gzip 3.06 kB 3.06 kB
hooks.module.js gzip 371 B 371 B
index.module.js gzip 212 B 212 B
link.module.js gzip 2.46 kB 2.46 kB
routerDirect..dule.js gzip 273 B 273 B
withRouter.m..dule.js gzip 272 B 272 B
Overall change 7.22 kB 7.22 kB
Client Build Manifests
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Serverless bundles
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_error.js gzip 46.4 kB 46.4 kB
404.html gzip 1.43 kB 1.43 kB
hooks.html gzip 1.06 kB 1.06 kB
index.js gzip 46.5 kB 46.5 kB
link.js gzip 72 kB 72 kB
routerDirect.js gzip 70.3 kB 70.3 kB
withRouter.js gzip 70.1 kB 70.1 kB
Overall change 308 kB 308 kB

Commit: 446ea16

@ijjk
Copy link
Member

ijjk commented Feb 5, 2020

Stats from current PR

Default Server Mode
General
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
buildDuration 13.1s 13.4s ⚠️ +355ms
nodeModulesSize 52.6 MB 52.6 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
main-HASH.js gzip 5.12 kB 5.12 kB
webpack-HASH.js gzip 746 B 746 B
4952ddcd88e7..54d3.js gzip 4.68 kB 4.68 kB
commons.HASH.js gzip 4.06 kB 4.06 kB
de003c3a9d30..c4ea.js gzip 13.6 kB 13.6 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 67.4 kB 67.4 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
main-HASH.module.js gzip 4.12 kB 4.12 kB
webpack-HASH..dule.js gzip 746 B 746 B
4952ddcd88e7..dule.js gzip 5.56 kB 5.56 kB
de003c3a9d30..dule.js gzip 12.4 kB 12.4 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 62 kB 62 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
polyfills-HASH.js gzip 4.76 kB 4.76 kB
Overall change 4.76 kB 4.76 kB
Client Pages
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_app.js gzip 1.15 kB 1.15 kB
_error.js gzip 4.07 kB 4.07 kB
hooks.js gzip 779 B 779 B
index.js gzip 222 B 222 B
link.js gzip 2.89 kB 2.89 kB
routerDirect.js gzip 283 B 283 B
withRouter.js gzip 282 B 282 B
Overall change 9.68 kB 9.68 kB
Client Pages Modern
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_app.module.js gzip 576 B 576 B
_error.module.js gzip 3.06 kB 3.06 kB
hooks.module.js gzip 371 B 371 B
index.module.js gzip 212 B 212 B
link.module.js gzip 2.46 kB 2.46 kB
routerDirect..dule.js gzip 273 B 273 B
withRouter.m..dule.js gzip 272 B 272 B
Overall change 7.22 kB 7.22 kB
Client Build Manifests
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
index.html gzip 1.02 kB 1.02 kB
link.html gzip 1.03 kB 1.03 kB
withRouter.html gzip 1.01 kB 1.01 kB
Overall change 3.06 kB 3.06 kB

Serverless Mode
General
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
buildDuration 13.8s 14s ⚠️ +175ms
nodeModulesSize 52.6 MB 52.6 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
main-HASH.js gzip 5.12 kB 5.12 kB
webpack-HASH.js gzip 746 B 746 B
4952ddcd88e7..54d3.js gzip 4.68 kB 4.68 kB
commons.HASH.js gzip 4.06 kB 4.06 kB
de003c3a9d30..c4ea.js gzip 13.6 kB 13.6 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 67.4 kB 67.4 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
main-HASH.module.js gzip 4.12 kB 4.12 kB
webpack-HASH..dule.js gzip 746 B 746 B
4952ddcd88e7..dule.js gzip 5.56 kB 5.56 kB
de003c3a9d30..dule.js gzip 12.4 kB 12.4 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 62 kB 62 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
polyfills-HASH.js gzip 4.76 kB 4.76 kB
Overall change 4.76 kB 4.76 kB
Client Pages
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_app.js gzip 1.15 kB 1.15 kB
_error.js gzip 4.07 kB 4.07 kB
hooks.js gzip 779 B 779 B
index.js gzip 222 B 222 B
link.js gzip 2.89 kB 2.89 kB
routerDirect.js gzip 283 B 283 B
withRouter.js gzip 282 B 282 B
Overall change 9.68 kB 9.68 kB
Client Pages Modern
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_app.module.js gzip 576 B 576 B
_error.module.js gzip 3.06 kB 3.06 kB
hooks.module.js gzip 371 B 371 B
index.module.js gzip 212 B 212 B
link.module.js gzip 2.46 kB 2.46 kB
routerDirect..dule.js gzip 273 B 273 B
withRouter.m..dule.js gzip 272 B 272 B
Overall change 7.22 kB 7.22 kB
Client Build Manifests
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Serverless bundles
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_error.js gzip 46.5 kB 46.5 kB
404.html gzip 1.43 kB 1.43 kB
hooks.html gzip 1.06 kB 1.06 kB
index.js gzip 46.5 kB 46.5 kB
link.js gzip 72 kB 72 kB
routerDirect.js gzip 70.3 kB 70.3 kB
withRouter.js gzip 70.1 kB 70.1 kB
Overall change 308 kB 308 kB

Commit: 53834c6

@HaNdTriX
Copy link
Contributor Author

HaNdTriX commented Feb 5, 2020

@Timer since you have reopend my PR I have updated it to work with the latest changes in the Next.js world:

  • Added support for functional _app.js components
  • Improved Automatic Static Optimization warning
  • Detect when user wraps a page tree multiple times
  • Expose apolloClient to NextAppContext
  • Expose apolloClient to NextPageContext

This gives us all the flexibility we need. The HOC now supports:

  • Wrapping _app.js (functional)
  • Wrapping _app.js (class)
  • Wrapping _app.js (functional) with custom getInitialProps
  • Wrapping _app.js (class) with custom getInitialProps
  • Wrapping page components
  • Wrapping page components with custom getInitialProps
  • Consuming apolloClient Page.getInitialProps
  • Consuming apolloClient _App.getInitialProps
  • Automatic Static Optimization (ssr:false)

Status: ready to merge

@ijjk
Copy link
Member

ijjk commented Feb 5, 2020

Stats from current PR

Default Server Mode
General
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
buildDuration 11.8s 11.8s ⚠️ +33ms
nodeModulesSize 52.6 MB 52.6 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
main-HASH.js gzip 5.12 kB 5.12 kB
webpack-HASH.js gzip 746 B 746 B
4952ddcd88e7..54d3.js gzip 4.68 kB 4.68 kB
commons.HASH.js gzip 4.06 kB 4.06 kB
de003c3a9d30..c4ea.js gzip 13.6 kB 13.6 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 67.4 kB 67.4 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
main-HASH.module.js gzip 4.12 kB 4.12 kB
webpack-HASH..dule.js gzip 746 B 746 B
4952ddcd88e7..dule.js gzip 5.56 kB 5.56 kB
de003c3a9d30..dule.js gzip 12.4 kB 12.4 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 62 kB 62 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
polyfills-HASH.js gzip 4.76 kB 4.76 kB
Overall change 4.76 kB 4.76 kB
Client Pages
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_app.js gzip 1.15 kB 1.15 kB
_error.js gzip 4.07 kB 4.07 kB
hooks.js gzip 779 B 779 B
index.js gzip 222 B 222 B
link.js gzip 2.89 kB 2.89 kB
routerDirect.js gzip 283 B 283 B
withRouter.js gzip 282 B 282 B
Overall change 9.68 kB 9.68 kB
Client Pages Modern
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_app.module.js gzip 576 B 576 B
_error.module.js gzip 3.06 kB 3.06 kB
hooks.module.js gzip 371 B 371 B
index.module.js gzip 212 B 212 B
link.module.js gzip 2.46 kB 2.46 kB
routerDirect..dule.js gzip 273 B 273 B
withRouter.m..dule.js gzip 272 B 272 B
Overall change 7.22 kB 7.22 kB
Client Build Manifests
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
index.html gzip 1.02 kB 1.02 kB
link.html gzip 1.03 kB 1.03 kB
withRouter.html gzip 1.01 kB 1.01 kB
Overall change 3.06 kB 3.06 kB

Serverless Mode
General
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
buildDuration 12.4s 12.4s -71ms
nodeModulesSize 52.6 MB 52.6 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
main-HASH.js gzip 5.12 kB 5.12 kB
webpack-HASH.js gzip 746 B 746 B
4952ddcd88e7..54d3.js gzip 4.68 kB 4.68 kB
commons.HASH.js gzip 4.06 kB 4.06 kB
de003c3a9d30..c4ea.js gzip 13.6 kB 13.6 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 67.4 kB 67.4 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
main-HASH.module.js gzip 4.12 kB 4.12 kB
webpack-HASH..dule.js gzip 746 B 746 B
4952ddcd88e7..dule.js gzip 5.56 kB 5.56 kB
de003c3a9d30..dule.js gzip 12.4 kB 12.4 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 62 kB 62 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
polyfills-HASH.js gzip 4.76 kB 4.76 kB
Overall change 4.76 kB 4.76 kB
Client Pages
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_app.js gzip 1.15 kB 1.15 kB
_error.js gzip 4.07 kB 4.07 kB
hooks.js gzip 779 B 779 B
index.js gzip 222 B 222 B
link.js gzip 2.89 kB 2.89 kB
routerDirect.js gzip 283 B 283 B
withRouter.js gzip 282 B 282 B
Overall change 9.68 kB 9.68 kB
Client Pages Modern
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_app.module.js gzip 576 B 576 B
_error.module.js gzip 3.06 kB 3.06 kB
hooks.module.js gzip 371 B 371 B
index.module.js gzip 212 B 212 B
link.module.js gzip 2.46 kB 2.46 kB
routerDirect..dule.js gzip 273 B 273 B
withRouter.m..dule.js gzip 272 B 272 B
Overall change 7.22 kB 7.22 kB
Client Build Manifests
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Serverless bundles
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_error.js gzip 46.5 kB 46.5 kB
404.html gzip 1.43 kB 1.43 kB
hooks.html gzip 1.06 kB 1.06 kB
index.js gzip 46.5 kB 46.5 kB
link.js gzip 72 kB 72 kB
routerDirect.js gzip 70.3 kB 70.3 kB
withRouter.js gzip 70.1 kB 70.1 kB
Overall change 308 kB 308 kB

Commit: 7c93b73

@ijjk
Copy link
Member

ijjk commented Feb 6, 2020

Stats from current PR

Default Server Mode
General
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
buildDuration 12.6s 12.5s -106ms
nodeModulesSize 52.6 MB 52.6 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
main-HASH.js gzip 5.12 kB 5.12 kB
webpack-HASH.js gzip 746 B 746 B
4952ddcd88e7..54d3.js gzip 4.68 kB 4.68 kB
commons.HASH.js gzip 4.06 kB 4.06 kB
de003c3a9d30..b50f.js gzip 13.6 kB 13.6 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 67.3 kB 67.3 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
main-HASH.module.js gzip 4.12 kB 4.12 kB
webpack-HASH..dule.js gzip 746 B 746 B
4952ddcd88e7..dule.js gzip 5.56 kB 5.56 kB
de003c3a9d30..dule.js gzip 12.4 kB 12.4 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 61.9 kB 61.9 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
polyfills-HASH.js gzip 4.76 kB 4.76 kB
Overall change 4.76 kB 4.76 kB
Client Pages
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_app.js gzip 1.15 kB 1.15 kB
_error.js gzip 4.07 kB 4.07 kB
hooks.js gzip 779 B 779 B
index.js gzip 222 B 222 B
link.js gzip 2.89 kB 2.89 kB
routerDirect.js gzip 283 B 283 B
withRouter.js gzip 282 B 282 B
Overall change 9.68 kB 9.68 kB
Client Pages Modern
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_app.module.js gzip 576 B 576 B
_error.module.js gzip 3.06 kB 3.06 kB
hooks.module.js gzip 371 B 371 B
index.module.js gzip 212 B 212 B
link.module.js gzip 2.46 kB 2.46 kB
routerDirect..dule.js gzip 273 B 273 B
withRouter.m..dule.js gzip 272 B 272 B
Overall change 7.22 kB 7.22 kB
Client Build Manifests
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
index.html gzip 1.02 kB 1.02 kB
link.html gzip 1.03 kB 1.03 kB
withRouter.html gzip 1.02 kB 1.02 kB
Overall change 3.07 kB 3.07 kB

Serverless Mode
General
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
buildDuration 12.7s 12.7s ⚠️ +9ms
nodeModulesSize 52.6 MB 52.6 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
main-HASH.js gzip 5.12 kB 5.12 kB
webpack-HASH.js gzip 746 B 746 B
4952ddcd88e7..54d3.js gzip 4.68 kB 4.68 kB
commons.HASH.js gzip 4.06 kB 4.06 kB
de003c3a9d30..b50f.js gzip 13.6 kB 13.6 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 67.3 kB 67.3 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
main-HASH.module.js gzip 4.12 kB 4.12 kB
webpack-HASH..dule.js gzip 746 B 746 B
4952ddcd88e7..dule.js gzip 5.56 kB 5.56 kB
de003c3a9d30..dule.js gzip 12.4 kB 12.4 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 61.9 kB 61.9 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
polyfills-HASH.js gzip 4.76 kB 4.76 kB
Overall change 4.76 kB 4.76 kB
Client Pages
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_app.js gzip 1.15 kB 1.15 kB
_error.js gzip 4.07 kB 4.07 kB
hooks.js gzip 779 B 779 B
index.js gzip 222 B 222 B
link.js gzip 2.89 kB 2.89 kB
routerDirect.js gzip 283 B 283 B
withRouter.js gzip 282 B 282 B
Overall change 9.68 kB 9.68 kB
Client Pages Modern
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_app.module.js gzip 576 B 576 B
_error.module.js gzip 3.06 kB 3.06 kB
hooks.module.js gzip 371 B 371 B
index.module.js gzip 212 B 212 B
link.module.js gzip 2.46 kB 2.46 kB
routerDirect..dule.js gzip 273 B 273 B
withRouter.m..dule.js gzip 272 B 272 B
Overall change 7.22 kB 7.22 kB
Client Build Manifests
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Serverless bundles
zeit/next.js canary HaNdTriX/next.js examples/apollo-app-js Change
_error.js gzip 46.5 kB 46.5 kB
404.html gzip 1.43 kB 1.43 kB
hooks.html gzip 1.07 kB 1.07 kB
index.js gzip 46.5 kB 46.5 kB
link.js gzip 72 kB 72 kB
routerDirect.js gzip 70.2 kB 70.2 kB
withRouter.js gzip 70 kB 70 kB
Overall change 308 kB 308 kB

Commit: 205014f

Copy link
Member

@Timer Timer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great! Thanks!

@Timer Timer merged commit 20d8823 into vercel:canary Feb 7, 2020
chibicode pushed a commit to chibicode/next.js that referenced this pull request Feb 11, 2020
* Make withApollo work with _app.js components

* Support wrapping functional _App

* Add apolloClient to NextPageContext & NextPageContext

* Propertly call App.getInitialProps if used in NextAppContext

* Add Automatic Static Optimization warning
@followbl
Copy link
Contributor

@adamsoffer you had any luck getting data/withApollo to your persistent layout components? We're running in to the exact problem you outlined above.

@zacksinclair
Copy link

@HaNdTriX Just wanted to let you know that I based my implementation off your example and it saved me a ton of time seeing the different ctx structures spelled out. Appreciate you sharing it.

@vercel vercel locked as resolved and limited conversation to collaborators Jan 30, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
area: examples Anything inside the examples folder
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

10 participants