apollographql / apollo-client-devtools Goto Github PK

Are the dev tools supposed to be compatible with Apollo 2? We're running 2.0.0-alpha.28 and the dev tools don't work. Endless loading and unable to load schema.

https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm

This doesn't list the mutation panel yet, and doesn't have a screenshot.

Enhancement proposal: It would be highly useful to be able to:

• save current GraphiQL query with variables, with editable save-name defaulting to given query/mutation name
• list saved queries for current endpoint, sorted by date from newest, or by save-name
• load selected saved query in the list
• delete selected saved query in the list
• rename selected saved query in the list
• save loaded and updated query with variables
• save loaded and updated query with variables under new name (keeping the old save intact)
• rename the currently saved/loaded query
• optionally import/export saved queries for current endpoint

apollographql/apollo-client#1871

Looks like it has trouble with some objects like Date types which are still OK when JSON serialized and sent to a GraphQL server.

Can we have official firefox support for this addon ?

The build from #41 works for now, but it's not durable.

Can you please bump-up graphql-tag and graphql versions? Because sometimes issues like this (issue #47) from graphql-tag pops-up when I'm testing out queries through the Dev Tools. e.g.: when I'm checking store values vs re-fetching values.

p.s. This is my first ever github issue; I hope I wan't rude or anything.

When using the dark theme for Chrome dev tools, the extension fails to render properly. Confused me at first as I thought none of my queries were showing up in the list, but it turns out that the text was rendering as white against a white background.

Hi, I am not sure what I am doing wrong, but tools are always disabled.

I have upgraded apollo-client to (0.5.20) and react-apollo to (0.7.1)
No luck (I also noticed that APOLLO_CLIENT was not in global variables at this point)

Then, I have added following code to my client initialisation:

client = new ApolloClient({
      networkInterface,
      dataIdFromObject: (result: any) => {
        return result._id;
      },
      connectToDevTools: true
    });

    window.__APOLLO_CLIENT__ = client;

Still no luck.
Running latest Chrome 55, on Mac OS X.

There are two other postMessage related issues logged here (#64, #58), but they both seem related to passing non-serialized objects.

In my case, a simple mutation as described in the "Apollo User Auth w/ Email" guide will throw this error if executed more than once.

The error isn't thrown with the Apollo Dev Tools disabled.

I've setup the ApolloClient to use a client-side executor and schemas - no graphql server.

The graphiql ui picks this up nicely - but when I change the schema the app reloads modules and seems to disconnect the graphiql ui. So when running a query there will just be a spinner forever after code changes.

Workaround for now: Close and reopen devtools on code changes.

I saw the same symptom in @Urigo's angular/graphql presentation, where he had to close and reopen devtools - don't think it was a network issue.

For some reason, I used to be able to see Apollo in Chrome DevTools, but it doesn't appear any more. I tried with my own Graphcool project and with the next-apollo example: https://next-with-apollo.now.sh (apollo-client@^0.7.3 and react-apollo@^0.8.1, see code: https://github.com/zeit/next.js/tree/master/examples/with-apollo). Reinstalling the extension didn't help.

Why doesn't hitting cmd make different attributes selectable in the apollo devtools?

A gif is worth a thousand pictures (aka 1M words):

Although the above gif doesn't show it, I can confirm this doesn't work even when the docs panel is open and loaded.
It would be awesome if this just worked. Any insights as to what's going wrong?
Thanks!

I was trying to figure out why the extension was not connecting to the app and it turned out that I simply forgot connectToDevTools: true. While I was in the process of fixing this, I noticed that the icon in the corner of the browser looks the same for both connected and disconnected apps. The redux one, however, becomes colorful if the store is discoverable so it's easy to know if the state can be debugged or not.

If the Apollo icon also highlighted itself, the overall devs' UX would improve in my view. I can also imagine an extra menu item at the top of the dropdown menu, which would open the corresponding developer tools tab.

WDYT?

My main use case for Redux Devtools when working with Apollo is for viewing GraphQL query errors (which are not surfaced as regular JavaScript errors and also don't get thrown with any meaningful information on the server):

Since displaying these errors using the Redux Devtools requires drilling down multiple levels, it'd be super helpful if the Apollo Devtools could surface them in an easier way. As far as I can tell there's currently no way to see errors, even in the queries pane.

How do I use apollo-client-devtools with react-native?

With analytics built in, would be nice to optout (unless I'm missing it somewhere?).

I haven't been able to get the Apollo Devtools to show up reliably in my developer toolbar.

According to @stubailo:

I think it's because we only check for Apollo existence once here: https://github.com/apollostack/apollo-client-devtools/blob/bc84febe32d7d50d4d547678890cdfeec2cc2610/extension/devtools.js#L1

In addition to seeing the Query String and Variables, it would be great if you could also see things like the query Options. For queries with pollIntervals, it would also be very cool if there was a pause button.

I'm experimenting with Apollo in the context of Angular 2 app. I connect to multiple graphql end-points , so I have configured multiple clients using ApolloModule.forRoot(provideClients).
Not sure if this is possible, but it would be nice if devtools shows a drop down showing available clients to use, whatever the current context in the webapp might be.

Hi,

I'm getting the following error when using the graphiql tool inside of the devtools (graphiql works fine outside of apollo devtools for 0.11.2)
latest react-apollo (1.4.3) and apollo-client(1.8.0)

Uncaught Error: Schema must be an instance of GraphQLSchema. Also ensure that there are not multiple versions of GraphQL installed in your node_modules directory.

I've noticed that the GraphiQL inside the apollo client devtools doesn't react to ctrl+space interactions, which usually shows an auto complete for properties on GraphQL types.

Is there a specific reason for this or could this be added?

I prefer the Apollo devtools to running GraphiQL on an endpoint as the devtools are configured with the right HTTP headers. This is really helpful for my apps, as almost all of them have header based authentication.

Thanks!

In the extension, select a query then check "load from cache"
The spinner appears and the results are not returned.
Unchecking the options returns the correct results from the server.
The correct items appear to be in the cache (Store tab) and ROOT_QUERY.

@stubailo and I ran into an issue on apollo-client the other day which made us think that maybe the devtools can't detect the version of the umd bundles. This is actually an issue in apollo-client (build setup), but we should test if it's actually a problem here and track it if it is.

We need the version number to help make sure that the devtools are compatible with whichever version of Apollo Client the page is running.

I have a fairly large app with many queries being made. When I have the apollo devtools enabled, I find that after a short bit, my computer fan starts working double and the chrome extension helper is using ~100% cpu.

I'm not sure if this is related to the issue I tried to help fix #28, or if it is related to something new. My browser doesn't fully crash like it used to, but it is clearly taking quite a bit of cpu and slowing everything down.

Is anyone else seeing something similar.

Thanks!

Right now an array of objects doesn't look great:

We should make it easy to tell where one item ends and the next begins.

Could you provide a tutorial how could I use it with React Native?

I am trying to figure out why queries that are executed directly on the ApolloClient with .query do not appear in apollo-client-devtools. Well they do appear, but only temporarily.

When composing a graphql query on a component you get the following actions

APOLLO_QUERY_INIT
APOLLO_QUERY_RESULT

However when executing a query directly using the client (i.e. my case I am using withApollo to pass client to my component) you get the following actions

APOLLO_QUERY_INIT
APOLLO_QUERY_RESULT
APOLLO_QUERY_STOP

Queries with the latter actions seems to have their result removed from the store once retrieved. So you actually see it pop up in the devtools, but then it disappears.

Devling into the apollo-client and react-apollo it seems that composed components use

return this.queryManager.watchQuery<T>(options);

whereas withApollo uses

return this.queryManager.query<T>(options);

From my understanding query seems to remove/stop the query once it's completed. This seems to be governed by shouldSubscribe - found here. I am still not 100% sure how. The codes jumps around quite a bit. It would be great if someone could point me to some documentation or explain how ObservableQueries work in the context of the apollo-client. It seems the term subscribe is used quite a bit, but I feel like this is different from the conventional subscription people refer to in apollo. I couldn't quite link it to everything.

I am trying to get into the library so I can contribute more. Any help here would be appreciated.

In the end I would like withApollo queries to appear in the apollo-client-devtools.

Thanks.

When running a query and out of any reason the server doesn't respond the result window just loads forever. Closing and reopening the devtools is the only option to get it working again.

It would be nice to be able to cancel a running query (i.e. play-button turning into stop-button with appropriate shortcut).

Devtool's explorer pane's load from cache checkbox is hooked up to conditional logic that sets a boolean value passed to its apollo-client's queries' noFetch option.

The noFetch query configuration option has been replaced with a more sophisticated fetchPolicy option in apollo-client v1.0.0-rc.1

Consequently the load-from-cache devtool checkbox can cause errors when the devtool extension is used to inspect an application using apollo-client >= 1.0.0, such as githunt.com.

https://github.com/apollographql/apollo-client-devtools/blob/master/app/components/Explorer/Explorer.js#L69

Hi,

Currently, Apollo tracing data can be displayed on Apollo Engine.

It could be useful to allow developers to view tracing informations directly in this devtools as well, as the setup would be more simple and wouldn't need a proxy.

My usecase is that I can't guarantee that my team will adopt Apollo Engine for different reasons (timing, setup, pricing model, performance impact...) but I certainly want myself to easily be able to get dev insights on the perf of our graph queries.

Seems null variable will be convert to "null" if that field accepts String, look at this:

`/api/alarm/company?pz=${pageSize}&pi=${pageIndex}&ob=${orderBy}&ft=${fromTime}&tt=${toTime}&ac=${alarmCodes.join(',')}&ct=${confirmed}`

As #5 , seems this GraphiQL have some differences from what inside apollo-server.

apollo-client: 0.8.5
apollo-angular: 0.10.0
apollo-client-rxjs: 0.4.1

So I've had this extension installed for ages and have never ever seen the tab. Thought that the extension wasn't yet ready but saw a commit in Client that is pushing people towards this so figured I should take another look. Still no tab.

Within Angular apps, Apollo Client is lazily loaded and the window.__APOLLO_CLIENT__ property is only being set when a component is loaded that depends on Apollo. Even if I refresh the page on a route that contains a component using Apollo, it still doesn't display the tab.

Tried #24 but it doesn't seem to change anything despite it supposedly polling for the property.

The only way to get the Apollo tab to work, is to view a component that depends on ApolloClient THEN open the DevTools, when the property has already been set.

Related: #23

Devtools sometimes shows up but mostly doesn't (race condition?)

Webpack: 2.3.3
Extension: 1.0.8.1
Chrome: 57.0.2987.133 (64-bit)
React/Redux/Apollo stack

The extension actually loads: Devtools/Sources shows that the hook.js Content Script has loaded, and indeed window.APOLLO_DEVTOOLS_GLOBAL_HOOK shows the correct version (and of course, the Warning message doesn't appear).

Restarting Chrome sometimes fixes the problem.

Repeat of #8

Hey, i using devtools with electron, and i get some warnings, its something bad?

ELECTRON-> [2920:1229/161954:ERROR:CONSOLE(1308)] "Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Inspector`. See https://fb.me/react-
warning-keys for more information.                                                                                                                                                              
    in div (created by Inspector)                                                                                                                                                    
    in Inspector (created by Panel)                                                                                                                                                  
    in div (created by Panel)                                                                                                                                                        
    in Panel", source: chrome-extension://apollo-client-developer-tools/dist/index_bundle.js (1308)                                                                                  
                                                                                                                                                                                    
ELECTRON-> [2920:1229/161954:ERROR:CONSOLE(1308)] "Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `StoreTreeFieldSet`. See https://fb.m
e/react-warning-keys for more information.                                                                                                                                                      
    in StoreTreeField (created by StoreTreeFieldSet)                                                                                                                                 
    in StoreTreeFieldSet (created by Inspector)                                                                                                                                      
    in div (created by Inspector)                                                                                                                                                    
    in div (created by Inspector)                                                                                                                                                    
    in div (created by Inspector)                                                                                                                                                    
    in Inspector (created by Panel)                                                                                                                                                  
    in div (created by Panel)                                                                                                                                                        
    in Panel", source: chrome-extension://apollo-client-developer-tools/dist/index_bundle.js (1308)                                                                                  
[2920:1229/161954:ERROR:CONSOLE(1308)] "Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `StoreTreeArray`. See https://fb.me/r
eact-warning-keys for more information.                                                                                                                                                         
    in StoreTreeArrayItem (created by StoreTreeArray)                                                                                                                                
    in StoreTreeArray (created by StoreTreeValue)                                                                                                                                    
    in span (created by StoreTreeValue)                                                                                                                                              
    in StoreTreeValue (created by StoreTreeField)                                                                                                                                    
    in div (created by StoreTreeField)                                                                                                                                               
    in StoreTreeField (created by StoreTreeFieldSet)                                                                                                                                 
    in div (created by StoreTreeFieldSet)                                                                                                                                            
    in div (created by StoreTreeFieldSet)                                                                                                                                            
    in span (created by StoreTreeFieldSet)                                                                                                                                           
    in StoreTreeFieldSet (created by Inspector)                                                                                                                                      
    in div (created by Inspector)                                                                                                                                                    
    in div (created by Inspector)                                                                                                                                                    
    in div (created by Inspector)                                                                                                                                                    
    in Inspector (created by Panel)                                                                                                                                                  
    in div (created by Panel)                                                                                                                                                        
    in Panel", source: chrome-extension://apollo-client-developer-tools/dist/index_bundle.js (1308)          

script to install devtools

        let installExtension = require('electron-devtools-installer')

        installExtension.default('jdkknkkbebbapilgoeccciglkfbmbnfm')
            .then((name) => console.log(name, ' INSTALLED\n'))
            .catch((err) => console.log('An error occurred: ', err))

I just upgraded to AC 2.0 and devtools 2.0.5. When I run a query, I get [object Object] as the response instead of JSON.

I can't seem to find mutations in the apollo devtools. I would have thought it would work just like any other query.

Is this be design? Is there an enhancement planned? Am I just missing it?

Thanks.

It would be highly useful to have the possibility to run multiple different queries on the developed site. In this aspect, it relates to a complementary ability to save/load GraphiQL queries in #16.

The implementation could be done e.h. using standard tabbed interface with tabs named after the queries/mutations in them, or <unnamed> for tabs with no named query yet.

The README suggests developing against the GitHunt-React devtools branch, which does not exist.

Example: apollographql/react-apollo@8af4384#diff-b9cfc7f2cdf78a7f4b91a753d10865a2

Whenever I change my graphql API, I need to close devtools and open them again to see the changes reflected in graphiql.

It would be nice to have a button that reloads graphiql.

On initial load, everything seems to work fine, but after a clicking around a couple of times, I start getting an unending stream of long process warnings for processes taking around 250 ms, about twice a second, which completely locks up the browser tab I have open. Disabling Devtools causes it to go away.

If there's anything strange about our setup that might be triggering this, I'm guessing it's the fact that we're using deeply nested fragments.

Here's an example query.

query Section {
  section {
    ...SectionHeaderSection
    ...SectionOutcomesSection
    ...SingleStudentSection
    ...StudentsMonitoringSection
    ...AppBody
    ...RouteForUser
    ...LastUpdatedSection
    __typename
  }
}
fragment SectionHeaderSection on SectionData {
  ...CourseSettingsSection
  ...AverageGradeSummarySection
  ...StudentDistributionSummarySection
  ...SectionInfoSection
  __typename
}
fragment CourseSettingsSection on SectionData {
  stats {
    averages {
      grades
      __typename
    }
    gradesStddev
    __typename
  }
  settings {
    values {
      ...SettingsMessages
      ranges
      __typename
    }
    defaults {
      ...SettingsMessages
      __typename
    }
    gradeHistogram
    __typename
  }
  __typename
}
fragment SettingsMessages on CourseSettingsFields {
  messageLow
  messageMiddle
  messageHigh
  __typename
}
fragment AverageGradeSummarySection on SectionData {
  stats {
    averages {
      grades
      __typename
    }
    __typename
  }
  __typename
}
fragment StudentDistributionSummarySection on SectionData {
  stats {
    ranges {
      grades {
        low {
          ...RangeValues
          __typename
        }
        middle {
          ...RangeValues
          __typename
        }
        high {
          ...RangeValues
          __typename
        }
        __typename
      }
      __typename
    }
    __typename
  }
  distributionMessages {
    low
    middle
    high
    __typename
  }
  __typename
}
fragment RangeValues on StatsRange {
  max
  min
  value
  __typename
}
fragment SectionInfoSection on SectionData {
  name
  stats {
    studentCount
    __typename
  }
  code
  number
  __typename
}
fragment LastUpdatedSection on SectionData {
  lastUpdated
  __typename
}
fragment AppBody on SectionData {
  user {
    type
    __typename
  }
  __typename
}
fragment StudentsMonitoringSection on SectionData {
  code
  ...HelpSection
  ...SearchToolsSection
  __typename
}
fragment HelpSection on SectionData {
  ...IsDataAvailableSection
  __typename
}
fragment IsDataAvailableSection on SectionData {
  statsAvailable
  __typename
}
fragment SearchToolsSection on SectionData {
  ...IsDataAvailableSection
  __typename
}
fragment SingleStudentSection on SectionData {
  user {
    type
    __typename
  }
  ...DetailedInfoSection
  ...StudentChartsSection
  __typename
}
fragment StudentChartsSection on SectionData {
  dateStart
  dateEnd
  user {
    type
    __typename
  }
  __typename
}
fragment DetailedInfoSection on SectionData {
  user {
    type
    __typename
  }
  ...StudentFlagsSection
  ...DetailedInfoHeaderSection
  __typename
}
fragment StudentFlagsSection on SectionData {
  settings {
    values {
      messageLow
      __typename
    }
    __typename
  }
  user {
    type
    __typename
  }
  __typename
}
fragment DetailedInfoHeaderSection on SectionData {
  ...ContactButtonSection
  __typename
}
fragment ContactButtonSection on SectionData {
  user {
    type
    __typename
  }
  instructors {
    name
    address
    enrollmentType
    __typename
  }
  __typename
}
fragment SectionOutcomesSection on SectionData {
  code
  ...SectionChartsSection
  ...SectionFlagsSection
  __typename
}
fragment SectionChartsSection on SectionData {
  user {
    type
    __typename
  }
  charts {
    assignments
    engagement
    quizzes
    __typename
  }
  __typename
}
fragment SectionFlagsSection on SectionData {
  user {
    type
    __typename
  }
  settings {
    values {
      messageLow
      __typename
    }
    __typename
  }
  flags {
    text
    __typename
  }
  __typename
}
fragment RouteForUser on SectionData {
  user {
    type
    id
    __typename
  }
  __typename
}

I don't know if this relevant as well, but we've also been having trouble with filter and propTypes from graphql-anywhere eating up a lot of CPU as well.

From AC

• could be related to #1871

I have afterware on my apollo client to handle errors in my app. In order to check the server's response status I have to clone the response. It was working fine until suddenly (chrome update?) I started getting this message:
DOMException: Failed to execute 'postMessage' on 'Window': Error: Network request failed with status 401 - "Unauthorized" could not be cloned.
(the error is the response from the server).

To replicate, create an afterware that clones the response from the server.

Thanks!

The GraphiQL tab works fine unless I check "Load from cache" - if I try to run a query with that option selected, it displays a never ending loading indicator. Not sure what details I can provide to clarify.

I love my devtools in dark mode. I'm not sure if we can figure out wether or not the user has selected dark mode and style the Apollo dev tools accordingly, but it would already be a huge improvement if we set a background color like graphiql does:

So the other panels won't look like this:

Hi @daniman @stubailo ,

This extension isn't working very well when I use subscriptions-transpor-ws as a network interface for the apollo client. The GQL operations are working as intended using the apollo client but when I open the dev tools and start using graphiQL shipped with this extension, right after click on the play button the onclose callback from the websocket is called and the close -> try reconnect loop started replaying every 1/2 s.

Can you please check the problem as this is a precious tool when developing with apollo client and subscriptions-transport-ws?

If there were more than one queries in the graphiql, it will returns:

{
  "errors": [
    {
      "message": "Must provide operation name if query contains multiple operations.",
      "locations": null,
      "path": null
    }
  ]
}

I have a separate backend that is independent of my client and is served at a different port. Unfortunately devtools fails to detect this and looks for the /graphql at the same server as the app is served from. Is there a solution to this or is this a bug?

I've got React, Redux and Devtron devtools working in Electron, but can't get apollo-client-devtools working.

I'm using electron-devtools-installer and the following:

installer.default('jdkknkkbebbapilgoeccciglkfbmbnfm', true )
      .then((name) => console.log(name, ' INSTALLED\n'))
      .catch((err) => console.log('An error occurred: ', err))

Outputs:

Apollo Client Developer Tools  INSTALLED

I'm using the same tool to download the other devtools as well.

However, when I open Electron devtools, I only see React, Redux and Devtron devtools, no sign of Apollo devtools.

I followed the logic and it looks like it's supposed to only instantiate if window.__APOLLO_CLIENT__ is set, and process.env.NODE_ENV is not production, and both are the case for me. . .but I still get no Apollo dev tools.

I have a pretty similar setup (same React/Apollo setup) in just a simple JS web app, and Apollo Dev Tools are present in Chrome, but just not in Electron.

I'll try and dig and see if I can find anything.

[email protected]
[email protected]

I can see Apollo tab in chrome after I add connectToDevTools: true into new ApolloClient(),
but the questions is when I open a page, the query displayed in the Watched queries panel, but soon when the page is ready, the query disappeared from the panel. why?

Thanks.