prevent rendering twice with apollo example #8917
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Client Pages
Client Pages Modern
Client Build Manifests
Serverless bundles
Commit: 4c5f74f |
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Client Pages
Client Pages Modern
Client Build Manifests
Serverless bundles
Commit: 2366fa7 |
Could you please elaborate on this a bit? |
|
Hi Alexander, see ln56 there is also const apolloCient. I dont like having two same naming declarations 'apolloClient' is already declared in the upper scope.eslint(no-shadow) |
Stats from current PRDefault Server Mode (Decrease detected ✓)General Overall decrease ✓
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless Mode (Decrease detected ✓)General Overall decrease ✓
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Client Pages
Client Pages Modern
Client Build Manifests
Serverless bundles
Commit: 9bc5ed8 |
|
You could probably just use const apolloClient = (ctx.apolloClient = initApolloClient())
// using apolloClient↓ ctx.apolloClient = initApolloClient()
// using ctx.apolloClientI believe that ctx is scoped to a single request, so there should not be any problems. Renaming vars into |
|
ok that seems better i just didnt want the same names on different scopes :) i dont know why the const apolloClient |
i just didnt like two same names in different scopes
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Client Pages
Client Pages Modern
Client Build Manifests
Serverless bundles
Commit: 720136f |
Stats from current PRDefault Server Mode (Decrease detected ✓)General Overall decrease ✓
Client Bundles (main, webpack, commons) Overall decrease ✓
Client Bundles (main, webpack, commons) Modern Overall decrease ✓
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
DiffsDiff for main-HASH.js@@ -368,7 +368,7 @@ if (!window.Promise) {
var data = JSON.parse(document.getElementById('__NEXT_DATA__').textContent);
window.__NEXT_DATA__ = data;
-var version = "9.0.8-canary.0";
+var version = "9.0.7";
exports.version = version;
var props = data.props,
err = data.err,Diff for main-HASH.module.js@@ -425,7 +425,7 @@ if (!window.Promise) {
const data = JSON.parse(document.getElementById('__NEXT_DATA__').textContent);
window.__NEXT_DATA__ = data;
-const version = "9.0.8-canary.0";
+const version = "9.0.7";
exports.version = version;
const {
props,Diff for index.html@@ -12,7 +12,7 @@
as="script" crossorigin="anonymous" />
<link rel="preload" href="/_next/static/runtime/webpack-7928590be3ef2e55b835.module.js"
as="script" crossorigin="anonymous" />
- <link rel="preload" href="/_next/static/runtime/main-fcd912ba93559b0a7f1e.module.js"
+ <link rel="preload" href="/_next/static/runtime/main-8e9c3ecc800504c1198a.module.js"
as="script" crossorigin="anonymous" />
<link rel="preload" href="/_next/static/chunks/framework.cdb73e402d876d4ac87f.module.js"
as="script" crossorigin="anonymous" />
@@ -43,9 +43,9 @@
async="" crossorigin="anonymous" nomodule=""></script>
<script src="/_next/static/runtime/webpack-7928590be3ef2e55b835.module.js"
async="" crossorigin="anonymous" type="module"></script>
- <script src="/_next/static/runtime/main-604d6eb984ddfe58f28a.js"
+ <script src="/_next/static/runtime/main-ab6925e7edc77e55b8d4.js"
async="" crossorigin="anonymous" nomodule=""></script>
- <script src="/_next/static/runtime/main-fcd912ba93559b0a7f1e.module.js"
+ <script src="/_next/static/runtime/main-8e9c3ecc800504c1198a.module.js"
async="" crossorigin="anonymous" type="module"></script>
<script src="/_next/static/chunks/framework.cdb73e402d876d4ac87f.js"
async="" crossorigin="anonymous" nomodule=""></script>Diff for link.html@@ -16,7 +16,7 @@
as="script" crossorigin="anonymous" />
<link rel="preload" href="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.5b4a58199ffc83bbcfcc.module.js"
as="script" crossorigin="anonymous" />
- <link rel="preload" href="/_next/static/runtime/main-fcd912ba93559b0a7f1e.module.js"
+ <link rel="preload" href="/_next/static/runtime/main-8e9c3ecc800504c1198a.module.js"
as="script" crossorigin="anonymous" />
<link rel="preload" href="/_next/static/BUILD_ID/_buildManifest.module.js"
as="script" crossorigin="anonymous" />
@@ -56,9 +56,9 @@
async="" crossorigin="anonymous" nomodule=""></script>
<script src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.5b4a58199ffc83bbcfcc.module.js"
async="" crossorigin="anonymous" type="module"></script>
- <script src="/_next/static/runtime/main-604d6eb984ddfe58f28a.js"
+ <script src="/_next/static/runtime/main-ab6925e7edc77e55b8d4.js"
async="" crossorigin="anonymous" nomodule=""></script>
- <script src="/_next/static/runtime/main-fcd912ba93559b0a7f1e.module.js"
+ <script src="/_next/static/runtime/main-8e9c3ecc800504c1198a.module.js"
async="" crossorigin="anonymous" type="module"></script>
<script src="/_next/static/BUILD_ID/_buildManifest.js" async=""
crossorigin="anonymous" nomodule=""></script>Diff for withRouter.html@@ -16,7 +16,7 @@
as="script" crossorigin="anonymous" />
<link rel="preload" href="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.5b4a58199ffc83bbcfcc.module.js"
as="script" crossorigin="anonymous" />
- <link rel="preload" href="/_next/static/runtime/main-fcd912ba93559b0a7f1e.module.js"
+ <link rel="preload" href="/_next/static/runtime/main-8e9c3ecc800504c1198a.module.js"
as="script" crossorigin="anonymous" />
<link rel="preload" href="/_next/static/BUILD_ID/_buildManifest.module.js"
as="script" crossorigin="anonymous" />
@@ -54,9 +54,9 @@
async="" crossorigin="anonymous" nomodule=""></script>
<script src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.5b4a58199ffc83bbcfcc.module.js"
async="" crossorigin="anonymous" type="module"></script>
- <script src="/_next/static/runtime/main-604d6eb984ddfe58f28a.js"
+ <script src="/_next/static/runtime/main-ab6925e7edc77e55b8d4.js"
async="" crossorigin="anonymous" nomodule=""></script>
- <script src="/_next/static/runtime/main-fcd912ba93559b0a7f1e.module.js"
+ <script src="/_next/static/runtime/main-8e9c3ecc800504c1198a.module.js"
async="" crossorigin="anonymous" type="module"></script>
<script src="/_next/static/BUILD_ID/_buildManifest.js" async=""
crossorigin="anonymous" nomodule=""></script>Serverless Mode (Decrease detected ✓)General Overall decrease ✓
Client Bundles (main, webpack, commons) Overall decrease ✓
Client Bundles (main, webpack, commons) Modern Overall decrease ✓
Client Pages
Client Pages Modern
Client Build Manifests
Serverless bundles
Commit: 1035338 |
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Client Pages
Client Pages Modern
Client Build Manifests
Serverless bundles
Commit: 4879583 |
|
The React tree can't differ between SSR and the client -- this will cause a hydration mismatch. In React 16.10+ and 17, this will likely error even harder. I'm not sure this is the right solution. Can you please open an issue for us to discuss further? I'll close this PR for now because it doesn't seem correct. |
|
I think you didnt took the time to read why this PR is made, but thats fine. Personally i dont mind because i dont use nextjs in production. But the fact the withApollo component is rendering twice is because of nextjs, it happens only on the SSR part. They added in apollo 3.1.2 a failsave so you will not notice anymore calls with ssr: false still being requested. So they fixed it on their part when apps like next do it wrongly. Which is fine. This PR only has been made to prevent the second render with the apollo wrapper from the example. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
please see: apollographql/react-apollo#3515 (comment) all credits for Hugh Willson looking into this. I only use NextJS for demonstrations but same thing happening in production app.
i added the renaming of the apolloClient since its declared on multiple scopes, and declaration of the cache
personal note: i would remove the example 'with-graphql-hooks' its outdated and with-apollo should be enough, maybe an option on _app level is nice (like 7 had) but you can use it then with hooks hoc components whatever. So maybe two versions: one on app level and one on page level.