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.

Sign up for GitHub

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

Jump to bottom

Update examples for Apollo with AppTree #8180

Merged
merged 3 commits into from
Jul 31, 2019
Merged

Update examples for Apollo with AppTree #8180

merged 3 commits into from
Jul 31, 2019

Conversation

ijjk
Copy link
Member

@ijjk ijjk commented Jul 30, 2019

Adds the example changes from #7732

@ijjk ijjk requested a review from lfades as a code owner July 30, 2019 18:27
@ijjk ijjk requested a review from Timer July 30, 2019 18:27
@github-actions
Copy link
Contributor

Stats from current PR

Click to expand stats
zeit/next.js canary ijjk/next.js update/apollo-examples Change
Build Duration 14.7s 14.4s -289ms
node_modules Size 45.9 MB 45.9 MB ✓
Total Bundle (main, webpack, commons) Size 206 kB 206 kB ✓
Total Bundle (main, webpack, commons) gzip Size 67.9 kB 67.9 kB ✓
Client _app Size 2.39 kB 2.39 kB ✓
Client _app gzip Size 1.08 kB 1.08 kB ✓
Client _error Size 8.22 kB 8.22 kB ✓
Client _error gzip Size 3.16 kB 3.16 kB ✓
Client pages/index Size 343 B 343 B ✓
Client pages/index gzip Size 246 B 246 B ✓
Client pages/link Size 4.08 kB 4.08 kB ✓
Client pages/link gzip Size 1.8 kB 1.8 kB ✓
Client pages/routerDirect Size 423 B 423 B ✓
Client pages/routerDirect gzip Size 306 B 306 B ✓
Client pages/withRouter Size 435 B 435 B ✓
Client pages/withRouter gzip Size 301 B 301 B ✓
Client main Size 15.6 kB 15.6 kB ✓
Client main gzip Size 5.39 kB 5.39 kB ✓
Client commons Size 188 kB 188 kB ✓
Client commons gzip Size 61.1 kB 61.1 kB ✓
Client webpack Size 1.49 kB 1.49 kB ✓
Client webpack gzip Size 770 B 770 B ✓
Base Rendered Size 1.35 kB 1.35 kB ✓
Build Dir Size 703 kB 703 kB ✓
Click to expand serverless stats
zeit/next.js canary ijjk/next.js update/apollo-examples Change
Build Duration 15.9s 15.8s -117ms
node_modules Size 45.9 MB 45.9 MB ✓
Total Bundle (main, webpack, commons) Size 206 kB 206 kB ✓
Total Bundle (main, webpack, commons) gzip Size 67.9 kB 67.8 kB -3 B
Client _app Size 2.39 kB 2.39 kB ✓
Client _app gzip Size 1.08 kB 1.08 kB -1 B
Client _error Size 8.22 kB 8.22 kB ✓
Client _error gzip Size 3.16 kB 3.16 kB ✓
Client pages/index Size 343 B 343 B ✓
Client pages/index gzip Size 246 B 246 B ✓
Client pages/link Size 4.08 kB 4.08 kB ✓
Client pages/link gzip Size 1.8 kB 1.8 kB ✓
Client pages/routerDirect Size 423 B 423 B ✓
Client pages/routerDirect gzip Size 306 B 306 B ✓
Client pages/withRouter Size 435 B 435 B ✓
Client pages/withRouter gzip Size 301 B 300 B -1 B
Client main Size 15.6 kB 15.6 kB ✓
Client main gzip Size 5.39 kB 5.39 kB -2 B
Client commons Size 188 kB 188 kB ✓
Client commons gzip Size 61.1 kB 61.1 kB ✓
Client webpack Size 1.49 kB 1.49 kB ✓
Client webpack gzip Size 770 B 770 B ✓
Serverless pages/link Size 252 kB 252 kB ✓
Serverless pages/link gzip Size 67.9 kB 67.9 kB ⚠️ +1 B
Serverless pages/index Size 244 kB 244 kB ✓
Serverless pages/index gzip Size 65.8 kB 65.8 kB ⚠️ +1 B
Serverless pages/_error Size 244 kB 244 kB ✓
Serverless pages/_error gzip Size 65.5 kB 65.5 kB ⚠️ +1 B
Serverless pages/routerDirect Size 245 kB 245 kB ✓
Serverless pages/routerDirect gzip Size 65.7 kB 65.7 kB -1 B
Serverless pages/withRouter Size 245 kB 245 kB ✓
Serverless pages/withRouter gzip Size 65.8 kB 65.8 kB ✓
Build Dir Size 1.89 MB 1.89 MB ✓

@github-actions
Copy link
Contributor

Stats from current PR

Click to expand stats
zeit/next.js canary ijjk/next.js update/apollo-examples Change
Build Duration 13.6s 13.1s -427ms
node_modules Size 45.9 MB 45.9 MB ✓
Total Bundle (main, webpack, commons) Size 206 kB 206 kB ✓
Total Bundle (main, webpack, commons) gzip Size 67.9 kB 67.9 kB ✓
Client _app Size 2.39 kB 2.39 kB ✓
Client _app gzip Size 1.08 kB 1.08 kB ✓
Client _error Size 8.22 kB 8.22 kB ✓
Client _error gzip Size 3.16 kB 3.16 kB ✓
Client pages/index Size 343 B 343 B ✓
Client pages/index gzip Size 246 B 246 B ✓
Client pages/link Size 4.08 kB 4.08 kB ✓
Client pages/link gzip Size 1.8 kB 1.8 kB ✓
Client pages/routerDirect Size 423 B 423 B ✓
Client pages/routerDirect gzip Size 306 B 306 B ✓
Client pages/withRouter Size 435 B 435 B ✓
Client pages/withRouter gzip Size 301 B 301 B ✓
Client main Size 15.6 kB 15.6 kB ✓
Client main gzip Size 5.39 kB 5.39 kB ✓
Client commons Size 188 kB 188 kB ✓
Client commons gzip Size 61.1 kB 61.1 kB ✓
Client webpack Size 1.49 kB 1.49 kB ✓
Client webpack gzip Size 770 B 770 B ✓
Base Rendered Size 1.35 kB 1.35 kB ✓
Build Dir Size 703 kB 703 kB ✓
Click to expand serverless stats
zeit/next.js canary ijjk/next.js update/apollo-examples Change
Build Duration 14.8s 14.5s -274ms
node_modules Size 45.9 MB 45.9 MB ✓
Total Bundle (main, webpack, commons) Size 206 kB 206 kB ✓
Total Bundle (main, webpack, commons) gzip Size 67.9 kB 67.9 kB ✓
Client _app Size 2.39 kB 2.39 kB ✓
Client _app gzip Size 1.08 kB 1.08 kB ✓
Client _error Size 8.22 kB 8.22 kB ✓
Client _error gzip Size 3.16 kB 3.16 kB ✓
Client pages/index Size 343 B 343 B ✓
Client pages/index gzip Size 246 B 246 B ✓
Client pages/link Size 4.08 kB 4.08 kB ✓
Client pages/link gzip Size 1.8 kB 1.8 kB ✓
Client pages/routerDirect Size 423 B 423 B ✓
Client pages/routerDirect gzip Size 306 B 306 B ✓
Client pages/withRouter Size 435 B 435 B ✓
Client pages/withRouter gzip Size 301 B 301 B ✓
Client main Size 15.6 kB 15.6 kB ✓
Client main gzip Size 5.39 kB 5.39 kB ✓
Client commons Size 188 kB 188 kB ✓
Client commons gzip Size 61.1 kB 61.1 kB ✓
Client webpack Size 1.49 kB 1.49 kB ✓
Client webpack gzip Size 770 B 770 B ✓
Serverless pages/link Size 252 kB 252 kB ✓
Serverless pages/link gzip Size 67.9 kB 67.9 kB ⚠️ +2 B
Serverless pages/index Size 244 kB 244 kB ✓
Serverless pages/index gzip Size 65.8 kB 65.8 kB ✓
Serverless pages/_error Size 244 kB 244 kB ✓
Serverless pages/_error gzip Size 65.5 kB 65.5 kB ⚠️ +1 B
Serverless pages/routerDirect Size 245 kB 245 kB ✓
Serverless pages/routerDirect gzip Size 65.7 kB 65.7 kB ⚠️ +1 B
Serverless pages/withRouter Size 245 kB 245 kB ✓
Serverless pages/withRouter gzip Size 65.8 kB 65.8 kB ⚠️ +1 B
Build Dir Size 1.89 MB 1.89 MB ✓

@Timer Timer added this to the 9.0.3 milestone Jul 31, 2019
@Timer Timer merged commit 86062aa into vercel:canary Jul 31, 2019
Timer pushed a commit that referenced this pull request Jul 31, 2019
@ijjk @Timer
Update examples for Apollo with AppTree (#8180)
dc9e270 
* Update examples for Apollo with AppTree

* Fix apolloClient being overwritten when rendering AppTree
@ijjk ijjk deleted the update/apollo-examples branch July 31, 2019 22:04
Timer pushed a commit that referenced this pull request Aug 8, 2019
@atcastle @Timer
Experimental: Granular build chunking (#7696)
3e8b36e 
* Refactor SplitChunksPlugin configs and add experimental chunking strategy

* Use typeDefs for SplitChunksConfig

* Modify build manifest plugin to create runtime build manifest

* Add support for granular chunks to page-loader

* Ensure normal behavior if experimental granularChunks flag is false

* Update client build manifest to remove iife & implicit global

* Factor out '/_next/' prepending into getDependencies

* Update packages/next/build/webpack-config.ts filepath regex

Co-Authored-By: Jason Miller <developit@users.noreply.github.com>

* Simplify dependency load ordering in page-loader.js

* Use SHA1 hash to shorten filenames for dependency modules

* Add scheduler to framework cacheGroup in webpack-config

* Update page loader to not duplicate script tags with query parameters

* Ensure no slashes end up in the file hashes

* Add prop-types to framework chunk

* Fix issue with mis-attributed events

* Increase modern build size budget--possibly decrement after consulting with @janicklasralph

* Use module.rawRequest for lib chunks

Co-Authored-By: Daniel Stockman <daniel.stockman@gmail.com>

* Dasherize lib chunk names

Co-Authored-By: Daniel Stockman <daniel.stockman@gmail.com>

* Fix typescript errors, reorganize lib name logic

* Dasherize rawRequest, short circuit name logic when rawRequest found

* Add `scheduler` package to test regex

* Fix a nit

* Adjust build manifest plugin

* Shorten key name

* Extract createPreloadLink helper

* Extract getDependencies helper

* Move method

* Minimize diff

* Minimize diff x2

* Fix Array.from polyfill

* Simplify page loader code

* Remove async=false for script tags

* Code golf `getDependencies` implementation

* Require lib chunks be in node_modules

* Update packages/next/build/webpack-config.ts

Co-Authored-By: Joe Haddad <timer150@gmail.com>

* Replace remaining missed windows compat regex

* Trim client manifest

* Prevent duplicate link preload tags

* Revert size test changes

* Squash manifest size even further

* Add comment for clarity

* Code golfing 🏌️‍♂️

* Correctly select modern dependencies

* Ship separate modern client manifest when module/module enabled

* Update packages/next/build/webpack/plugins/build-manifest-plugin.ts

Co-Authored-By: Joe Haddad <timer150@gmail.com>

* Remove unneccessary filter from page-loader

* Add lookbehind to file extension regex in page-loader

* v9.0.3

* Update examples for Apollo with AppTree (#8180)

* Update examples for Apollo with AppTree

* Fix apolloClient being overwritten when rendering AppTree

* Golf page-loader (#8190)

* Remove lookbehind for module replacement

* Wait for build manifest promise before page load or prefetch

* Updating modern-only chunks inside the right entry point

* Fixing ts errors

* Rename variable

* Revert "Wait for build manifest promise before page load or prefetch"

This reverts commit c370528.

* Use proper typedef for webpack chunk

* Re-enable promisified client build manifest

* Fix bug in getDependencies map

* Insert check for granularChunks in page-loader

* Increase size limit temporarily for granular chunks

* Add 50ms delay to flaky test

* Set env.__NEXT_GRANULAR_CHUNKS in webpack config

* Reset size limit to 187

* Set process.env.__NEXT_GRANULAR_CHUNKS to false if selectivePageBuilding

* Update test/integration/production/test/index.test.js

Co-Authored-By: Joe Haddad <timer150@gmail.com>

* Do not create promise if not using chunking PR
@thedv91
Copy link

thedv91 commented Aug 9, 2019

Error when using with Typescript

Property 'apolloClient' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'

@timneutkens timneutkens mentioned this pull request Aug 9, 2019
Closed
@NinjaOnRails
Copy link

NinjaOnRails commented Aug 11, 2019 •
edited
Loading

This finally allows for my cookies to get passed to the back-end with every request. However, it broke SSR and throws this error:
`Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at withApollo.js:25.
Error while running getDataFromTree { Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.`

EDIT 1:
I first mentioned it here: https://spectrum.chat/apollo/apollo-client/apollo-client-cookies~9a6087a8-a67e-4df6-935d-bd3eecbdbdaa
Ok, so now the error doesn't appear anymore with next@9.0.3, but SSR still isn't working
EDIT 2:
It seems to be a problem with using different versions of react-apollo (tested 2.1.11, 2.5.8 and 3.0.0), next(9.0.2 and 9.0.3) and getDataFromTree from either react-apollo or @apollo/react-ssr. I'm not getting any errors anymore. But when SSR works, cookies aren't getting passed, and the other way around. I use the latest with-apollo example code for my project
EDIT 3:
Specific observations using next@9.0.3 and { getDataFromTree } from '@apollo/react-ssr' (@apollo/react-ssr@3.0.0):

  • react-apollo@3.0.0: SSR works, cookies don't get passed, no error
  • react-apollo@2.5.8: SSR breaks, cookies get passed, no error (Tested on Chrome and Firefox. On Safari, cookies aren't even saved)

EDIT 4:
I've fixed it for myself using the latest libraries next@9.0.3, next-with-apollo@4.2.0 and react-apollo@3.0.0. Cookies are passed with every request, SSR working as expected and no errors. Code is here

@NinjaOnRails NinjaOnRails mentioned this pull request Aug 11, 2019
Closed
@vercel vercel locked as resolved and limited conversation to collaborators Feb 1, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@lfades lfades Awaiting requested review from lfades

@Timer Timer Awaiting requested review from Timer

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
9.0.3
Development

Successfully merging this pull request may close these issues.
4 participants
@ijjk @thedv91 @NinjaOnRails @Timer