Apollo-client-devtools: Client does not appear in Chrome?

Created on 10 Oct 2018  路  41Comments  路  Source: apollographql/apollo-client-devtools

After installing the client true Chrome extension store it does not appear as expected according to the documentation in developer tools next to console ( in that line of tabs )
Using latest versions as of today of all tools.

Did I overlook something?

needs-reproduction

Most helpful comment

Same issue on Version 75.0.3770.142 (Official Build) (64-bit)
Apollo Client Developer Tools -version 2.2.3

All 41 comments

I am experiencing the same problem. It previously worked but has since stopped and I have made no configuration changes.

Chrome: Version 69.0.3497.100 (Official Build) (64-bit)
Apollo Client DevTools: 2.1.3
OS: macOS Mojave 10.14

Edit Added OS

Me too. Chrome version 69.0.3497.100 (Official Build) (64-bit) for Mac/High Sierra.

Same occurred for Version 69.0.3497.100 (Official Build) (64-bit).

And if I have removed and installed the extension again, it works properly again.

@voordev @joeyparis @hethcox Does removing it / re-installing it help?

no, it does not

Any news? It's also not working for me. Running on Version 71.0.3578.98 (Official Build) (64-bit) and on Apollo Client DevTools 2.1.5. All the permissions are set properly, and I can't see any error in the extension console.

No tab shows up.

I'm using

const apolloClient: ApolloClient<any> = new ApolloClient({
  cache,
  link,
  connectToDevTools: true,
});

```
"apollo-cache": "^1.1.22",
"apollo-cache-inmemory": "1.3.12",
"apollo-client": "2.4.8",
"apollo-link": "1.2.6",
"apollo-link-batch-http": "1.2.6",
"apollo-link-context": "1.0.12",
"apollo-link-error": "1.1.5",
"apollo-link-retry": "^2.2.8",
````

and Chrome version 71.0.3578.98 (Official Build) (64-bit)

and a fresh install of the plugin

same issue for me ! anyone looking at the problem ????

It seems resolved in latest version 2.1.6. You can clone and build it, then load the unpacked extension to get the devtool back.
@hwillson plz release the latest version to Chrome webstore asap.

@karfield confirmed, thanks.

Has there been any update on this? I still see 2.1.5 as the latest in the chrome store and I still cannot get the dev tools extension to work.

Let's give this a shot using the same target repo. If you setup https://github.com/apollographql/fullstack-tutorial per its instructions, start the client and server in the final path, are you able to see the chrome extension?

I could get everything to work with your example. Looking the example code i could find that it is using Apollo's components, but i'm not using Apollo's components, i'm just using ApolloClient's mutate and query direct over react-saga, but, i can actually use GraphiQL and Docs on extension. Is extension intended for Apollo's components plus ApolloClient or can it's intended for ApolloClient "solo" too? Also, accessing "Cache" extension throws Uncaught TypeError: Cannot convert undefined or null to object and just stop working(screen became white).

I took a shot in the dark and removed dependency on 3rd party cookies, released in v2.1.9. I'm hoping this resolves the issue for everyone. If not, please comment here and let's try to work through it some more. ~I'm going to close the issue in the meantime.~

I'm going to close this in a week if I don't hear back.

I changed my mind, I'm going to leave this open for a week. Hopefully I hear some good news from you all!

I've had some very limited time, but it seems to be working :)
If I don't come back to this issue in a few days, consider it fixed!

Thanks for your time:)

You're very welcome @smeevil ! Please let me know if you run into any other issues or have any other feature suggestions!

I'm going to close this out now. I'm keeping a close eye on this because not all the issues have been ironed out (cc @candycanejane)

https://github.com/apollographql/apollo-client-devtools/issues/181#issuecomment-466230731

Ok, yea. It works using the local tutorial (with Chrome Version 72.0.3626.109/macOS High Sierra 10.13.6). Ok, so it must be one of our GraphQL libraries, and yes, it appears that some of them are out of date:
apollo-datasource-rest: 0.1.5
apollo-engine: 1.1.2
apollo-server: 2.3.1
apollo-server-cache-redis: 0.1.3
apollo-server-express: 2.3.1
graphql: 0.13.2
graphql-import: 0.5.3
graphql-tools: 2.24.0
graphql-type-json: 0.2.1

Thank you for looking into this! I expect we'll need to update at our end.

Thanks @candycanejane ! I'm happy to help. Those look like server dependencies. Can you share the apollo-specific client dependencies? It makes me uneasy blindly telling you to update dependencies without knowing what the root cause of DevTools breaking is.

@candycanejane I'm going to keep this issue closed in favor of #181.

same issue Version 74.0.3729.169 (Official Build) (64-bit)

The same problem Version 74.0.3729.169 (Official Build) (64-bit)

Same issue on Version 75.0.3770.100 (Official Build) (64-bit)

Same issue on Version 75.0.3770.142 (Official Build) (64-bit)
Apollo Client Developer Tools -version 2.2.3

Does not work on Chrome Version 75.0.3770.142 (Official Build) (64-bit)

With create-react-app works as it should, but with SSR NextJs example i had same issue.
It seems like it works again now with this fix https://github.com/zeit/next.js/commit/cba5c05b36b05da77760b38d93303a1f18d5b2b5

I am beyond perplexed as to why this is closed. My entire team has this extension and at any given time its not working for at least 2 of us. No rhyme or reason, sometimes the tab just shows empty, sometimes the entire tab in dev tools doesn't appear.
Please give this a serious look.

Dead for both of these versions:
Chrome Version 77.0.3865.120
Chrome Version 78.0.3904.70

Same issue here. So finally this issue has been resolved?

Is there any workaround?

any news? Got also this issue on v78.0.3904.70

@durdenx maybe downgrade your version of chrome. I have not tried.

Same issue here with Chrome Version 78.0.3904.87 (Official Build) (32-bit) on Windows 10, using Apollo Angular client.

It works after fixing issues I had with my code. To give a bit of context, I was implementing reading from / writing to apollo cache. Kinda weird though...

I have 2 machines.
One is a year old machine with only this extension plus ember inpector, while the other is a 7 year old machine with those 2 extensions plus about 10 more.
Both of these machines are running the latest version 1909 Windows 10 with Chrome 79.0.3945.79
But only the older one has the apollo tab showing up in the DevTools

The site that I am using it on is not local has has remained unchanged

Just open a new (Chrome) window after installing it.

I had the issue and came here, hit the bottom but no solution; disabled/enabled, nope.
But when I decided to open a new window: there it was, the Apollo tab to inspect ;)

I came here via google because I do not see the Apollo Dev Tools Tab in Chrome in a fresh created react-native app. In a new created react app the Apollo Dev Tools Tab is visible and working well. I tried https://github.com/apollographql/fullstack-tutorial from above and it is also working well.
(Chrome Version 80.0.3987.162)

The react app is create with npx create-react-app my-react-app.
The react-native app is created with npx react-native init my-rn-app.

I'm not sure why it is not working in both apps because the graphql related code is exactly the same.

The apollo packages are added with yarn add apollo-boost @apollo/react-hooks graphql.

The code for the react-native app.js file:

import React from 'react';
import {ApolloClient} from 'apollo-client';
import {InMemoryCache} from 'apollo-cache-inmemory';
import {HttpLink} from 'apollo-link-http';
import {ApolloProvider} from '@apollo/react-hooks';
import {useQuery} from '@apollo/react-hooks';
import {gql} from 'apollo-boost';

import {View, Text} from 'react-native';

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: new HttpLink({
    uri: 'https://graphql-pokemon.now.sh',
  }),
  connectToDevTools: true,
});

const MainPage = () => {
  const {data, loading, error} = useQuery(gql`
    query {
      pokemon(name: "Pikachu") {
        number
        name
      }
    }
  `);
  if (loading || error) return null;
  return (
    <View>
      <Text>{`name = ${data.pokemon.name}, number = ${data.pokemon.number}`}</Text>
    </View>
  );
};

const App = () => {
  return (
    <ApolloProvider client={client}>
      <MainPage />
    </ApolloProvider>
  );
};

export default App;

Same issue. Using react native Debugger and all of a sudden the tab went empty and it has not come back since.

If you're coming across this now, currently open issue is https://github.com/apollographql/apollo-client-devtools/issues/213

It works for me when i :

  • add connectToDevTools: true, in my createClient function
  • install the google extention
  • restart google chrome

Nothing else worked for me, but simply uninstalling and then reinstalling the extension worked.

Has anyone had success on React Native ? I have the Apollo extension installed on Chrome but It's impossible to see the Apollo Tab in Developer Tools

just uninstall the extension and reinstall it.
It will work

also you can change the configurations :)

Was this page helpful?
0 / 5 - 0 ratings