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 react relay modern example #11135

Closed
wants to merge 2 commits into from
Closed

Update react relay modern example #11135

wants to merge 2 commits into from

Conversation

rishabhsaxena
Copy link
Contributor

@rishabhsaxena rishabhsaxena commented Mar 17, 2020 •
edited

fixes #8537

@rishabhsaxena rishabhsaxena changed the title fixes #8537: use the same store for environments Update react relay modern example Mar 17, 2020
@ijjk
Copy link
Member

ijjk commented Mar 17, 2020

Stats from current PR

Default Server Mode
General
zeit/next.js canary rishabhsaxena/next.js update-react-relay-modern-example Change
buildDuration 8.9s 8.7s -182ms
nodeModulesSize 54.8 MB 54.8 MB ✓
Client Bundles (main, webpack, commons)
zeit/next.js canary rishabhsaxena/next.js update-react-relay-modern-example Change
main-HASH.js gzip 5.77 kB 5.77 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
de003c3a9d30..8eb0.js gzip 9.78 kB 9.78 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 55.4 kB 55.4 kB ✓
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary rishabhsaxena/next.js update-react-relay-modern-example Change
main-HASH.module.js gzip 4.78 kB 4.78 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
de003c3a9d30..dule.js gzip 6.71 kB 6.71 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 51.4 kB 51.4 kB ✓
Legacy Client Bundles (polyfills)
zeit/next.js canary rishabhsaxena/next.js update-react-relay-modern-example Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB ✓
Overall change 26.3 kB 26.3 kB ✓
Client Pages
zeit/next.js canary rishabhsaxena/next.js update-react-relay-modern-example Change
_app.js gzip 1.09 kB 1.09 kB ✓
_error.js gzip 2.97 kB 2.97 kB ✓
hooks.js gzip 664 B 664 B ✓
index.js gzip 222 B 222 B ✓
link.js gzip 1.89 kB 1.89 kB ✓
routerDirect.js gzip 279 B 279 B ✓
withRouter.js gzip 278 B 278 B ✓
Overall change 7.39 kB 7.39 kB ✓
Client Pages Modern
zeit/next.js canary rishabhsaxena/next.js update-react-relay-modern-example Change
_app.module.js gzip 594 B 594 B ✓
_error.module.js gzip 2.08 kB 2.08 kB ✓
hooks.module.js gzip 370 B 370 B ✓
index.module.js gzip 212 B 212 B ✓
link.module.js gzip 1.48 kB 1.48 kB ✓
routerDirect..dule.js gzip 271 B 271 B ✓
withRouter.m..dule.js gzip 270 B 270 B ✓
Overall change 5.28 kB 5.28 kB ✓
Client Build Manifests
zeit/next.js canary rishabhsaxena/next.js update-react-relay-modern-example 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 rishabhsaxena/next.js update-react-relay-modern-example Change
index.html gzip 916 B 916 B ✓
link.html gzip 924 B 924 B ✓
withRouter.html gzip 911 B 911 B ✓
Overall change 2.75 kB 2.75 kB ✓
Serverless Mode (Increase detected ⚠️)
General
zeit/next.js canary rishabhsaxena/next.js update-react-relay-modern-example Change
buildDuration 10.1s 9.7s -391ms
nodeModulesSize 54.8 MB 54.8 MB ✓
Client Bundles (main, webpack, commons)
zeit/next.js canary rishabhsaxena/next.js update-react-relay-modern-example Change
main-HASH.js gzip 5.77 kB 5.77 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
de003c3a9d30..8eb0.js gzip 9.78 kB 9.78 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 55.4 kB 55.4 kB ✓
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary rishabhsaxena/next.js update-react-relay-modern-example Change
main-HASH.module.js gzip 4.78 kB 4.78 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
de003c3a9d30..dule.js gzip 6.71 kB 6.71 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 51.4 kB 51.4 kB ✓
Legacy Client Bundles (polyfills)
zeit/next.js canary rishabhsaxena/next.js update-react-relay-modern-example Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB ✓
Overall change 26.3 kB 26.3 kB ✓
Client Pages
zeit/next.js canary rishabhsaxena/next.js update-react-relay-modern-example Change
_app.js gzip 1.09 kB 1.09 kB ✓
_error.js gzip 2.97 kB 2.97 kB ✓
hooks.js gzip 664 B 664 B ✓
index.js gzip 222 B 222 B ✓
link.js gzip 1.89 kB 1.89 kB ✓
routerDirect.js gzip 279 B 279 B ✓
withRouter.js gzip 278 B 278 B ✓
Overall change 7.39 kB 7.39 kB ✓
Client Pages Modern
zeit/next.js canary rishabhsaxena/next.js update-react-relay-modern-example Change
_app.module.js gzip 594 B 594 B ✓
_error.module.js gzip 2.08 kB 2.08 kB ✓
hooks.module.js gzip 370 B 370 B ✓
index.module.js gzip 212 B 212 B ✓
link.module.js gzip 1.48 kB 1.48 kB ✓
routerDirect..dule.js gzip 271 B 271 B ✓
withRouter.m..dule.js gzip 270 B 270 B ✓
Overall change 5.28 kB 5.28 kB ✓
Client Build Manifests
zeit/next.js canary rishabhsaxena/next.js update-react-relay-modern-example Change
_buildManifest.js gzip 61 B 61 B ✓
_buildManife..dule.js gzip 61 B 61 B ✓
Overall change 122 B 122 B ✓
Serverless bundles Overall increase ⚠️
zeit/next.js canary rishabhsaxena/next.js update-react-relay-modern-example Change
_error.js gzip 293 kB 293 kB -121 B
404.html gzip 1.32 kB 1.32 kB ✓
hooks.html gzip 956 B 956 B ✓
index.js gzip 293 kB 294 kB ⚠️ +768 B
link.js gzip 301 kB 301 kB ⚠️ +241 B
routerDirect.js gzip 300 kB 300 kB -26 B
withRouter.js gzip 300 kB 300 kB -36 B
Overall change 1.49 MB 1.49 MB ⚠️ +826 B

@ijjk
Copy link
Member

ijjk commented Mar 17, 2020

Stats from current PR

Default Server Mode
General
zeit/next.js canary rishabhsaxena/next.js update-react-relay-modern-example Change
buildDuration 10.2s 10.5s ⚠️ +286ms
nodeModulesSize 54.8 MB 54.8 MB ✓
Client Bundles (main, webpack, commons)
zeit/next.js canary rishabhsaxena/next.js update-react-relay-modern-example Change
main-HASH.js gzip 5.77 kB 5.77 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
de003c3a9d30..8eb0.js gzip 9.78 kB 9.78 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 55.4 kB 55.4 kB ✓
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary rishabhsaxena/next.js update-react-relay-modern-example Change
main-HASH.module.js gzip 4.78 kB 4.78 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
de003c3a9d30..dule.js gzip 6.71 kB 6.71 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 51.4 kB 51.4 kB ✓
Legacy Client Bundles (polyfills)
zeit/next.js canary rishabhsaxena/next.js update-react-relay-modern-example Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB ✓
Overall change 26.3 kB 26.3 kB ✓
Client Pages
zeit/next.js canary rishabhsaxena/next.js update-react-relay-modern-example Change
_app.js gzip 1.09 kB 1.09 kB ✓
_error.js gzip 2.97 kB 2.97 kB ✓
hooks.js gzip 664 B 664 B ✓
index.js gzip 222 B 222 B ✓
link.js gzip 1.89 kB 1.89 kB ✓
routerDirect.js gzip 279 B 279 B ✓
withRouter.js gzip 278 B 278 B ✓
Overall change 7.39 kB 7.39 kB ✓
Client Pages Modern
zeit/next.js canary rishabhsaxena/next.js update-react-relay-modern-example Change
_app.module.js gzip 594 B 594 B ✓
_error.module.js gzip 2.08 kB 2.08 kB ✓
hooks.module.js gzip 370 B 370 B ✓
index.module.js gzip 212 B 212 B ✓
link.module.js gzip 1.48 kB 1.48 kB ✓
routerDirect..dule.js gzip 271 B 271 B ✓
withRouter.m..dule.js gzip 270 B 270 B ✓
Overall change 5.28 kB 5.28 kB ✓
Client Build Manifests
zeit/next.js canary rishabhsaxena/next.js update-react-relay-modern-example 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 rishabhsaxena/next.js update-react-relay-modern-example Change
index.html gzip 916 B 916 B ✓
link.html gzip 924 B 924 B ✓
withRouter.html gzip 911 B 911 B ✓
Overall change 2.75 kB 2.75 kB ✓
Serverless Mode (Increase detected ⚠️)
General
zeit/next.js canary rishabhsaxena/next.js update-react-relay-modern-example Change
buildDuration 10.8s 11.2s ⚠️ +425ms
nodeModulesSize 54.8 MB 54.8 MB ✓
Client Bundles (main, webpack, commons)
zeit/next.js canary rishabhsaxena/next.js update-react-relay-modern-example Change
main-HASH.js gzip 5.77 kB 5.77 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
de003c3a9d30..8eb0.js gzip 9.78 kB 9.78 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 55.4 kB 55.4 kB ✓
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary rishabhsaxena/next.js update-react-relay-modern-example Change
main-HASH.module.js gzip 4.78 kB 4.78 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
de003c3a9d30..dule.js gzip 6.71 kB 6.71 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 51.4 kB 51.4 kB ✓
Legacy Client Bundles (polyfills)
zeit/next.js canary rishabhsaxena/next.js update-react-relay-modern-example Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB ✓
Overall change 26.3 kB 26.3 kB ✓
Client Pages
zeit/next.js canary rishabhsaxena/next.js update-react-relay-modern-example Change
_app.js gzip 1.09 kB 1.09 kB ✓
_error.js gzip 2.97 kB 2.97 kB ✓
hooks.js gzip 664 B 664 B ✓
index.js gzip 222 B 222 B ✓
link.js gzip 1.89 kB 1.89 kB ✓
routerDirect.js gzip 279 B 279 B ✓
withRouter.js gzip 278 B 278 B ✓
Overall change 7.39 kB 7.39 kB ✓
Client Pages Modern
zeit/next.js canary rishabhsaxena/next.js update-react-relay-modern-example Change
_app.module.js gzip 594 B 594 B ✓
_error.module.js gzip 2.08 kB 2.08 kB ✓
hooks.module.js gzip 370 B 370 B ✓
index.module.js gzip 212 B 212 B ✓
link.module.js gzip 1.48 kB 1.48 kB ✓
routerDirect..dule.js gzip 271 B 271 B ✓
withRouter.m..dule.js gzip 270 B 270 B ✓
Overall change 5.28 kB 5.28 kB ✓
Client Build Manifests
zeit/next.js canary rishabhsaxena/next.js update-react-relay-modern-example Change
_buildManifest.js gzip 61 B 61 B ✓
_buildManife..dule.js gzip 61 B 61 B ✓
Overall change 122 B 122 B ✓
Serverless bundles Overall increase ⚠️
zeit/next.js canary rishabhsaxena/next.js update-react-relay-modern-example Change
_error.js gzip 294 kB 293 kB -439 B
404.html gzip 1.32 kB 1.32 kB ✓
hooks.html gzip 956 B 956 B ✓
index.js gzip 293 kB 293 kB ⚠️ +363 B
link.js gzip 302 kB 301 kB -177 B
routerDirect.js gzip 300 kB 300 kB -142 B
withRouter.js gzip 299 kB 300 kB ⚠️ +784 B
Overall change 1.49 MB 1.49 MB ⚠️ +389 B

@lfades
Copy link
Member

lfades commented Mar 18, 2020

Hi @rishabhsaxena , can you add more details about how does this change fixes the issue? 🙏

@rishabhsaxena
Copy link
Contributor Author

rishabhsaxena commented Mar 19, 2020 •
edited

Sure @lfades
According to the react-relay-network-modern-ssr's readme, we should use the same primed store for create environment as we used in init environment.

So when we do renderToString on the server the store should already be populated since I suppose react won't wait for the query results since they are async?

Quote from react-relay-network-modern-ssr:

// Third, render the app a second time now that the Relay store has been primed
// and send HTML and bootstrap data to the client for rehydration.

Although I think the update isn't correct since we are using a global store here and should create a new one on the server for each request instead. If the logic for the fix seems correct I can try updating this PR or creating a new one.

@rishabhsaxena
Copy link
Contributor Author

closing in favour of #11193

@rishabhsaxena rishabhsaxena deleted the update-react-relay-modern-example branch March 19, 2020 09:20
@vercel vercel locked as resolved and limited conversation to collaborators Jan 31, 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
No milestone
Development

Successfully merging this pull request may close these issues.

with-react-relay-network-modern should use the same store for environments
3 participants
@rishabhsaxena @ijjk @lfades