Comments (6)
This is documented in https://the-guild.dev/graphql/apollo-angular/docs/performance/server-side-rendering#using-apollo-devtools, and the better solution is:
// When providing options
{
provide: APOLLO_OPTIONS,
useFactory: () {
return {
connectToDevTools: false
// ...
};
},
},
// Or when creating the client
apollo.create({
connectToDevTools: false
// ...
})
from apollo-angular.
But... does that not disable the Apollo Developer tools, which I want to use?
from apollo-angular.
It is not possible to use Apollo Developer tools on server side, but if you want to keep using it on the browser side, then you can do it conditionally, with something roughly like that:
const platformId = inject(PLATFORM_ID);
const isBrowser = isPlatformBrowser(platformId);
return {
ssrMode: !isBrowser,
connectToDevTools: isBrowser,
};
from apollo-angular.
Yes, I want to use the Developer tools on the client, not on the server.
Disabling it on the server is not going to solve this issue, because the issue is connectToDevTools
on the client side in the first place.
connectDevTools
being enabled makes Apollo spawn a 10 second long setTimeout
. This setTimeout
prevents Zone.js from becoming stable (until it completes) and this delays Angular hydration by those 10 seconds.
This issue is even relevant with no SSR at all, still preventing ApplicationRef#isStable
for 10 seconds. The fact is just that with SSR and hydration it becomes fairly obvious, because hydration is tied to isStable.
from apollo-angular.
Disabling it on the server is not going to solve this issue
Create a minimal reproduction case that attempts that, probably in a dedicated repository, and then we can work on it
no SSR at all, still preventing ApplicationRef#isStable
What is your use-case for a stable application in the browser ?
from apollo-angular.
Create a minimal reproduction case that attempts that, probably in a dedicated repository, and then we can work on it
https://github.com/diesieben07/apollo-angular-stable-repro
To reproduce start the dev server (npm start
). Open the application in the browser and look at the console. Note how the "Angular hydrated..." message takes 10 seconds to appear.
The same can be observed in production (npm run build
then npm run serve:ssr:apollo-angular-stable-repro
). Unfortunately there is no way to get Angular to log the "Angular hydrated..." message in production, so you'll have to either take my word for it or check yourself that Angular starts hydration when ApplicationRef#isStable
turns true. I have also logged that value manually, so the effect can be observed in production that way.
This delay goes away if the APP_INITIALIZER
that accesses Apollo (in app.config.ts
) is commented out / removed.
What is your use-case for a stable application in the browser ?
I do not have one, because this is a fairly niche feature of Angular. It is however used for SSR. My argument here was that this issue exists completely separate from and is not related to any kind of server side rendering.
from apollo-angular.
Related Issues (20)
- Feedback for “Pagination”
- TypeError: Cannot read properties of undefined (reading 'architect') HOT 2
- Feedback for “Server Side Rendering” HOT 1
- Feedback Reset Store on Logout
- For subscriptions, the errorPolicy setting does nothing. HOT 6
- Defer doesn't work with multipart/mixed or text/event-stream HOT 14
- Block ApolloClient devtools checks to run when using ApolloTestingModule HOT 1
- [docs] Simple Apollo Angular Example demo is broken
- Support for Angular Signals ? HOT 7
- Angular 17 support HOT 3
- apollo-angular schematics has a fixed version of apollo-angular and @apollo/client packages HOT 1
- Unable to load template plugin matching 'apollo-angular'
- `ERR_UNSUPPORTED_DIR_IMPORT` or `EISDIR` with `vitest` HOT 1
- Pending timers using fakeAsync HOT 1
- Reset the store not possible anymore with version 7.0.0 HOT 1
- Feedback for “Get Started” > "Installation without Angular Schematics" HOT 2
- No support for angular 18 HOT 1
- Feedback for “Error Handling”
- Apollo-Angular providers break Angular Material. HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from apollo-angular.