[bug] Devtools never appear if initial page does not contain an Apollo Client instance

[alessbell]

Intended outcome:
When I navigate to a page that initializes Apollo Client in the browser, the devtools should appear even if Apollo Client is not detected in the browser when the initial page load occurs.

Actual outcome:
If you have an app that is purely server rendered initially, and navigate to a page that loads Apollo Client the devtools never appear. You need to refresh the browser from the page that loads Apollo on the client in order for devtools to appear.

How to reproduce the issue:
I reproduced this in the Next.js experimental repo's polls-demo example.

If you start on the homepage, /, which is a React Server Component and navigate to the client component page, Apollo Client devtools never appear.

If you refresh the client component page, they do appear:

Desktop (please complete the following information):

• OS: [e.g. iOS] Mac OS
• Browser [e.g. chrome, safari] Arc
• Browser version [e.g. 22] 1.0.1
• Extension version [e.g. 3.0] 4.1.4

[vezaynk]

My app has delayed initializing for the graphql client, and I can't get the devtools to work :(

[jerelmiller]

Hey @vezaynk 👋

We just shipped 4.5.0 of the devtools that should provide some more help here. A few highlights:

• Will always create the "Apollo" panel, regardless of whether it can find a client
• When a client can't be found, a troubleshooting dialog is displayed. Here you can get tips on figuring out why it won't connect.
• The troubleshooting dialog contains a "retry" button that should allow you to try connecting again.

Please give the new version a try and let us know if the changes help!

[jerelmiller]

I've tested this out with recent versions of the devtools and they are working much better with these environments. Since we now go into the "connected" state of the devtools when a client is registered, we no longer need to rely on a page refresh for this to work. As such I'm going to close this out as completed 🙂

[github-actions]

Do you have any feedback for the maintainers? Please tell us by taking a one-minute survey. Your responses will help us understand Apollo Client usage and allow us to serve you better.