apollo-client-devtools: Apollo dev tools 4.0 not showing any data with multiple Apollo Clients

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…

About this issue

Original URL
State: open
Created 2 years ago
Reactions: 10
Comments: 29 (8 by maintainers)

Commits related to this issue

Fix Apollo dev tools extension Was happening because next.js renders our app (ui/_app.tsx) twice, and the cache is initialized during that process. This seems to be because of next.js rewrites, and i... — committed to HSLdevcom/jore4-ui by Leitsi a year ago
Fix Apollo dev tools extension Was happening because next.js renders our app (ui/_app.tsx) twice, and the cache is initialized during that process. This seems to be because of next.js rewrites, and i... — committed to HSLdevcom/jore4-ui by Leitsi a year ago
Fix Apollo dev tools extension Was happening because next.js renders our app (ui/_app.tsx) twice, and the cache is initialized during that process. This seems to be because of next.js rewrites, and i... — committed to HSLdevcom/jore4-ui by Leitsi a year ago
Share Apollo client to fix dev tools. See https://github.com/apollographql/apollo-client-devtools/issues/822 — committed to hwride/apollo-graphql-test by hwride a year ago

Most upvoted comments

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.

+13

henrinormak on Mar 4, 2022

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.

dcorb on Nov 15, 2022

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!

jerelmiller on Mar 9, 2023

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 !

dahei on Mar 29, 2022

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.

asgeo1 on Mar 3, 2022

@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

jpvajda on Sep 30, 2022

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

Restarting Chrome helped.

Oikio on Jul 6, 2022

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.

DaSchTour on Sep 30, 2022

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.

velislavgerov on Sep 3, 2022

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

cheapsteak on Jun 28, 2022

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?

diogocapela on Nov 23, 2023

@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

kjhuang-db on Apr 23, 2023

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 https://github.com/apollographql/apollo-client-devtools/blob/1cfa015c109201139fd71fe6089d05d8d2505c8f/src/extension/tab/hook.ts#L221

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.

johnhok on Mar 9, 2023

@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

dcorb on Nov 15, 2022