apollo-angular prevents Zone from becoming stable about apollo-angular

[PowerKiKi]

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
  // ...
})

[diesieben07]

But... does that not disable the Apollo Developer tools, which I want to use?

[PowerKiKi]

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,
};

[diesieben07]

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.

[PowerKiKi]

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 ?

[diesieben07]

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.