Apollo dev tools 4.0 not showing any data with multiple Apollo Clients

[Rigel772]

Intended outcome:
I expect to be able to see the queries data in browser extension.

Actual outcome:
Not showing any data.

How to reproduce the issue:
Install extension in browser.

Desktop (please complete the following information):

• OS: Linux Manjaro
• Browser chromium, firefox
• Browser version: Firefox Developer Edition 98, Chromium Version 98.0.4758.102 (Official Build) Manjaro Linux (64-bit)
• Extension version 4.0

The dev tools version is 4, same situation in Chrome as in Firefox. "@apollo/client": "^3.5.7",

const createApolloClient = (authToken) => {
  return new ApolloClient({
    link: new HttpLink({
      uri: "https://...url",
      headers: {
        Authorization: `Bearer ${authToken}`,
      },
    }),
    cache: new InMemoryCache(),
    connectToDevTools: true, // should not be necessary but added just in case
    defaultOptions: {
      watchQuery: {
        fetchPolicy: "cache-and-network",
        pollInterval: 3000,
      },
    },
  });
};

The application is React + Vitejs, if it makes any difference... No idea where to start any debuging, please help...

[asgeo1]

I'm having the same issue with 4.0.0 extension in Chrome. I've tried the troubleshooting steps but they didn't help.

The "Explorer" tab works fine, and executing any queries there will populate the Queries/Cache tabs.

However, executing queries in my app does nothing, so does not seem to be listening.

[asgeo1]

Actually, it's working for me now. I find that connectToDevTools: true is necessary, as well I found it didn't take effect immediately - I had to hard-refresh the page a couple of times.

[Rigel772]

Sadly does not work for me....

[henrinormak]

Had the same issue, but noticed that the code was creating multiple apollo clients - if this happens, only the first client is attached to the window as __APOLLO_CLIENT__, which is needed for the dev tools to work.

In short - make sure you only create a single apollo client, or if you do create multiple, make sure to assign the one you want to inspect via dev-tools to the window manually.

[dahei]

Had the same issue, but noticed that the code was creating multiple apollo clients - if this happens, only the first client is attached to the window as __APOLLO_CLIENT__, which is needed for the dev tools to work.

In short - make sure you only create a single apollo client, or if you do create multiple, make sure to assign the one you want to inspect via dev-tools to the window manually.

This was the missing piece! It looks like you can only watch one Apollo client at a time. Thanks @henrinormak !

[jpvajda]

Just sharing this related stack overflow post that seems to be relating to this issue. https://stackoverflow.com/a/72116931/1880490

[Rigel772]

Have found that "GraphQL Network Inspector" Chrome extension is working nicely

[Rigel772]

...actually, I might misunderstood its purpose...
I played with it a bit more and I managed somehow to see my unauthenticated queries in "Explorer" tab and after executing a query IN THE EXTENSION I can see it on "Queries" tab... however I do not need another graphiQL app, I expected to see queries being made IN THE APP, to be able to monitor the results, errors etc
How does it work for you? How do you use it?

[Rigel772]

...and regarding multiple instances of Apollo Client, the client attached to window of my app has "2" in the name: "ApolloClient2"...
Does it mean there is "ApolloClient1" somewhere? How can I check how many clients are there?
I am creating the client in useData hook like this:

export default function useData() {
  const [token, setToken] = useRecoilState(Token);
   const [client, setClient] = useState({});
  useEffect(() => {
    if (token) {
      setClient(() => createApolloClient(token.value));
    }
  }, [token]);
   return {
    client,
    DataProvider: ApolloProvider,
    setToken,
  };
}

[cheapsteak]

Hi there,

How is useData used? How many places is it used?
I might recommend trying a context provider approach (and use useMemo instead of useEffect) to see if that makes a difference. See here for an example: https://github.com/ellanan/mealkit/blob/main/src/ApolloClientProvider.tsx

But before you rewrite anything, could you please help us isolate where the problem might be by going to another site that uses apollo and see whether you see data there? e.g. https://studio.apollographql.com/login should show some queries

If you do see data there then we'll know that it's something to do with which instance of apollo client the extension is talking to

[Oikio]

Same problem here, did not work locally, but worked on https://studio.apollographql.com/login.

Restarting Chrome helped.

[velislavgerov]

Had a similar issue while doing local development. The extension didn't work properly when I was accessing my app via localhost. Swapping it for 127.0.0.1 solved the issue for me.

[shloak17107]

Had the same issue, but noticed that the code was creating multiple apollo clients - if this happens, only the first client is attached to the window as __APOLLO_CLIENT__, which is needed for the dev tools to work.

In short - make sure you only create a single apollo client, or if you do create multiple, make sure to assign the one you want to inspect via dev-tools to the window manually.

Hey, how do you check if there are indeed multiple instances of Apollo Client being created? And how do you assign the one you want to be able to inspect in Apollo Devtools?

[DaSchTour]

I have the same issue even with just one client. I removed all named clients. It's very frustrating not have not working dev tools. Sometime I also have some ghost data from ancient times. So it looks like sometime it works and then breaks and displays old data.

It also like the extension doesn't work correctly if apollo client is created "to late". So if you have an SPA and do no create Apollo on initial load it will not show up at all.

[jpvajda]

@MrDoomBringer This bug has been outstanding for some time, given your recent exploration into the duplicate queries issue we recently resolved, I was curious if you want to take a look that this one as well. 🙏 cc @bignimbus

[dcorb]

I found the issue in my case. Because of React re-rendering the code, it was executing (and generating) multiple new ApolloClient instances.
Make sure to put a console.log('test') next to your new Apollo Client initialization code, and see if it gets executed more than once.

[jpvajda]

@MrDoomBringer @bignimbus This might be an interesting issue to pick up soon for investigation. What do you think?

[dcorb]

@MrDoomBringer let me help you here:
A reproducible test case.
During the first 10 seconds, Apollo DevTools work, you can see the Queries for example.
https://90g9kq.csb.app/
After 10 seconds, a new ApolloClient is instantiated, and Apollo DevTools is empty.
Full Codesandbox https://codesandbox.io/s/adoring-ishizaka-90g9kq?file=/src/index.js

[johnhok]

Recently ran into this issue due to late creation of our apollo client instance. There are also multiple instances across different teams which made utilizing dev tools almost impossible.

I was able to fix it by cloning the extension, increasing the timeout it waits for the client to be instantiated and binded dev tools to a unique global variable here in the code

apollo-client-devtools/src/extension/tab/hook.ts

Line 221 in 1cfa015

function initializeDevtoolsHook() {

Seems like a more user friendly option would be to provide some configurability and let users bind to a custom variable or to manually execute the binding.

[jerelmiller]

Hey @johnhok 👋

We are considering a different approach to registering clients with the dev tools at some point. Unfortunately the way the Apollo Client and dev tools communicates is through a single window.__APOLLO_CLIENT__ variable, which doesn't work super well with multiple clients. I know the current situation isn't perfect, but we are definitely thinking of ways to make it better.

No guarantees on timeline, but I can at least say we are thinking about it! I think it would be super helpful to be able to toggle between the two clients and inspect what each is doing independently.

If your fork is working for you now, I'd suggest using that for the time being. I'd prefer not to do much to the current initializeDevtoolsHook until we come up with a better way of registering clients. Hope that helps!

[kjhuang-db]

hi @johnhok did you end up forking the extension, build it locally then load it as unpacked chrome extension?

[johnhok]

hi @johnhok did you end up forking the extension, build it locally then load it as unpacked chrome extension?

Yep that's exactly what I did. I forked it and did the hacky modifications I mentioned about increasing the timeout and binding to a different global variable. Only the specific apollo client I was interested in gets assigned to that variable.

Once you build it with the instructions in the readme you can load it as an unpacked extension like you mentioned.

[kjhuang-db]

@johnhok thank you I plan to do so :), based on the code, it does not seems a "different" global variable is needed though. can just suppress unwanted ones with explicit connectToDevTools: false, and leave only one with connectToDevTools: true, then the global singleton __APOLLO_CLIENT__ should be unique

[diogocapela]

Same issue here. Only one ApolloClient instance is being created, connectToDevTools: true is passed to the client, and window.__APOLLO_CLIENT__ is present.

Apollo Client Devtools does not show any data using localhost or 127.0.0.1.

It does work when using the GraphQL Network Inspector extension, but that does not allow for cache inspection.

Any news on this?

[jerelmiller]

Hey @diogocapela we've done a lot of work recently on the message passing between the client and devtools. Would you give a more recent version of the devtools a shot to see if it has resolved your issue finding the client? If not, feel free to open a new issue and I'd be happy to assist looking further into this :)

[adrianwix]

For me it does not work in 4.9.0
Only one ApolloClient instance is being created, connectToDevTools: true is passed to the client, and window.APOLLO_CLIENT is present. (As diogocapela mentioned)
@jerelmiller

[alessbell]

@adrianwix @diogocapela which version of Apollo Client are you using? Sorry to hear you're blocked on using the extension - as @jerelmiller said, we'd love to get some more info and debug further.

Since only one instance of the client is being created, please feel free to open a new issue. And if you're able to create a reproduction in an app we can run locally, that would be tremendously helpful 🙏

[adrianwix]

"@apollo/client": "^3.8.7" @alessbell.
I came here because I also had this issue before but then I removed the multiple instances being create and realize that it was still not working, so not sure exactly where the problem is now. Previously it would be solved after removing the duplicated instances

[jerelmiller]

@adrianwix do you mind creating a separate issue for this? I'd like to track this separately and keep the discussion in that issue so we don't clutter up this one too much 🙂. I'd love to help in any way I can. I think there might be an edge case we aren't handling yet.

[shamseer-ahammed]

i dont have duplicate instances and i am also getting the same, connectToDevTools: true
devtools shows up but wont show any data

chrome : Version 124.0.6367.119 (Official Build) (64-bit)
devttols version : 4.11.5