Merge pull request #79 from apollographql/2.0

support 2.0 and upgrade to react-16

README.md

@@ -3,7 +3,9 @@ Apollo Client Devtools
 
 This repository contains the [Apollo Client Devtools Chrome extension](https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm).
 
-The dev tools require at least `apollo-client@0.5.18`. To see component names in the query inspector, you need at least `react-apollo@0.7.1`.
+If you are running Apollo Client 2.0, the dev tools require at least `apollo-client@2.0.0-rc.2` and `react-apollo@2.0.0-beta.0`.
+
+If you have not upgraded to 2.0 yet, the dev tools require at least `apollo-client@0.5.18`. To see component names in the query inspector, you need at least `react-apollo@0.7.1`.
 
 Features
 ===

app/checkVersions.js

@@ -80,6 +80,7 @@ function checkVersions() {
           return response.json();
         })
         .then(function(response) {
+          if (!response.data.compatibilityMessages) return;
           response.data.compatibilityMessages.forEach(cm => {
             evalInPage(
               `console.info('Apollo devtools message:', "${cm.message}")`

app/components/Explorer/Explorer.js

@@ -1,6 +1,7 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import GraphiQL from 'graphiql';
-import { parse } from 'graphql';
+import { parse } from 'graphql/language/parser';
 import evalInPage from '../../evalInPage.js';
 
 import './graphiql.less';
@@ -79,7 +80,25 @@ export default class Explorer extends Component {
               errors: e.graphQLErrors,
             }));
           }
-          return window.__APOLLO_CLIENT__.networkInterface.query(payload);
+          if (window.__APOLLO_CLIENT__.networkInterface) {
+            return window.__APOLLO_CLIENT__.networkInterface.query(payload);
+          }
+          var completed;
+          return new Promise(function(resolve, reject) {
+            return window.__APOLLO_CLIENT__.__requestRaw(payload).subscribe({
+              next: data => {
+                if (completed) {
+                   console.warn(
+                     'Promise Wrapper does not support multiple results from Observable',
+                   );
+                 } else {
+                   completed = true;
+                   resolve(data);
+                }
+              },
+              error: reject,
+            });
+          });
         };
         `,
         (result, isException) => {}
@@ -90,7 +109,6 @@ export default class Explorer extends Component {
 
     this.graphQLFetcher = graphQLParams => {
       const { noFetch } = this.state;
-
       return createPromise(
         'window.__APOLLO_CLIENT__.makeGraphiqlQuery(' +
           JSON.stringify({

app/components/Images/Apollo.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 
 const Apollo = ({}) =>
   <svg

app/components/Images/GraphQL.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 
 const GraphQL = ({}) =>
   <svg version="1.1" width="32" height="32" viewBox="0 0 32 32">

app/components/Images/Queries.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 
 const Queries = ({}) =>
   <svg version="1.1" width="32" height="32" viewBox="0 0 32 32">

app/components/Images/Warning.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 
 const Warning = ({}) =>
   <svg

app/components/Inspector/Inspector.js

@@ -1,13 +1,14 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import { Sidebar } from '../Sidebar';
 import classnames from 'classnames';
 import evalInPage from '../../evalInPage';
-import _ from 'lodash';
+import flattenDeep from 'lodash.flattendeep';
 import './inspector.less';
 
 export default class Inspector extends React.Component {
   static childContextTypes = {
-    inspectorContext: React.PropTypes.object.isRequired
+    inspectorContext: PropTypes.object.isRequired
   };
 
   constructor(props) {
@@ -224,7 +225,7 @@ function dfsSearch({ data, regex, toHighlight, pathToId = [], dataId }) {
   Object.keys(storeObj).forEach(storeFieldKey => {
     const arr = [storeObj[storeFieldKey]];
 
-    const flatArr = _.flattenDeep(arr);
+    const flatArr = flattenDeep(arr);
 
     flatArr.forEach(val => {
       const valueMatches = typeof val === 'string' && regex.test(val);
@@ -260,7 +261,7 @@ function dfsSearch({ data, regex, toHighlight, pathToId = [], dataId }) {
 // Props: data, dataId, expand
 class StoreTreeFieldSet extends React.Component {
   static contextTypes = {
-    inspectorContext: React.PropTypes.object.isRequired
+    inspectorContext: PropTypes.object.isRequired
   };
 
   constructor(props) {
@@ -414,7 +415,7 @@ const StoreTreeValue = props =>
 // Props: data, storeKey, value
 class StoreTreeField extends React.Component {
   static contextTypes = {
-    inspectorContext: React.PropTypes.object.isRequired
+    inspectorContext: PropTypes.object.isRequired
   };
 
   getPossibleTypename() {

app/components/Logger/Logger.js

@@ -1,23 +1,11 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import { Sidebar } from '../Sidebar';
-import { connect } from 'react-redux';
-import pickBy from 'lodash/pickBy';
-import sortBy from 'lodash/sortBy';
 import classnames from 'classnames';
-import { getQueryDefinition } from 'apollo-client';
-import { parse } from 'graphql-tag/parser';
+import { parse } from 'graphql/language/parser';
 import { GraphqlCodeBlock } from 'graphql-syntax-highlighter-react';
 import './Logger.less';
 
-const queryNameFromQueryString = queryString => {
-  const doc = parse(queryString);
-  const queryDefinition = getQueryDefinition(doc);
-  if (queryDefinition.name && queryDefinition.name.value) {
-    return queryDefinition.name.value;
-  }
-  return null;
-};
-
 const queryLabel = action => {
   let label = '';
 

app/components/Mutations/Mutations.js

@@ -1,26 +1,18 @@
-import React, { PropTypes } from 'react';
-import pickBy from 'lodash/pickBy';
-import sortBy from 'lodash/sortBy';
+import PropTypes from 'prop-types';
+import React from 'react';
+import pickBy from 'lodash.pickby';
+import sortBy from 'lodash.sortby';
 import classnames from 'classnames';
-import { getMutationDefinition } from 'apollo-client';
-import { parse } from 'graphql-tag/parser';
+import { getOperationName } from 'apollo-utilities';
+import { parse } from 'graphql/language/parser';
 import { GraphqlCodeBlock } from 'graphql-syntax-highlighter-react';
 import { Sidebar } from '../Sidebar';
 import Warning from '../Images/Warning';
 
 import './Mutations.less';
 
-const mutationNameFromMutationString = mutationString => {
-  const doc = parse(mutationString);
-  const mutationDefinition = getMutationDefinition(doc);
-  if (mutationDefinition.name && mutationDefinition.name.value) {
-    return mutationDefinition.name.value;
-  }
-  return null;
-};
-
 const mutationLabel = (mutationId, mutation) => {
-  const mutationName = mutationNameFromMutationString(mutation.mutationString);
+  const mutationName = getOperationName(parse(mutation.mutationString));
   if (mutationName === null) {
     return mutationId;
   }
@@ -190,7 +182,7 @@ const GraphQLError = ({ error }) =>
   </li>;
 GraphQLError.propTypes = {
   error: PropTypes.shape({
-    message: React.PropTypes.string
+    message: PropTypes.string
   })
 };
 

app/components/Panel.js

@@ -1,6 +1,6 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import classnames from 'classnames';
-import { getMutationDefinition } from 'apollo-client';
 
 import WatchedQueries from './WatchedQueries';
 import Mutations from './Mutations';
@@ -36,7 +36,6 @@ export default class Panel extends Component {
 
     backgroundPageConnection.onMessage.addListener((logItem, sender) => {
       let tabData;
-
       if (logItem.queries) {
         tabData = {
           state: { queries: logItem.queries }
@@ -45,7 +44,7 @@ export default class Panel extends Component {
 
       if (logItem.mutations) {
         let mutations = logItem.mutations;
-        let mutationsArray = Object.keys(mutations).map(function (key, index) {
+        let mutationsArray = Object.keys(mutations).map(function(key, index) {
           return [key, mutations[key]];
         });
         // chose 10 arbitrary so we only display 10 mutations in log
@@ -54,7 +53,7 @@ export default class Panel extends Component {
           mutationsArray.length
         );
         mutations = {};
-        mutationsArray.forEach(function (m) {
+        mutationsArray.forEach(function(m) {
           mutations[m[0]] = m[1];
         });
 
@@ -64,7 +63,6 @@ export default class Panel extends Component {
       }
 
       if (logItem.inspector) {
-
         tabData = {
           state: { inspector: logItem.inspector }
         };
@@ -84,7 +82,6 @@ export default class Panel extends Component {
   }
 
   selectedApolloLog() {
-
     if (!this.state.tabData) {
       return {};
     }
@@ -187,15 +184,15 @@ export default class Panel extends Component {
             <Queries />
             <div>Queries</div>
           </div>
-          {getMutationDefinition &&
-            <div
-              title="Watched mutations"
-              className={classnames('tab', { active: active === 'mutations' })}
-              onClick={() => this.switchPane('mutations')}
-            >
-              <Queries />
-              <div>Mutations</div>
-            </div>}
+
+          <div
+            title="Watched mutations"
+            className={classnames('tab', { active: active === 'mutations' })}
+            onClick={() => this.switchPane('mutations')}
+          >
+            <Queries />
+            <div>Mutations</div>
+          </div>
           <div
             title="Apollo client store"
             className={classnames('tab', { active: active === 'store' })}

app/components/Sidebar.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import classnames from 'classnames';
 
 export class Sidebar extends Component {

app/components/WatchedQueries/WatchedQueries.js

@@ -1,27 +1,18 @@
-import React, { PropTypes } from 'react';
-import { connect } from 'react-redux';
-import pickBy from 'lodash/pickBy';
-import sortBy from 'lodash/sortBy';
+import PropTypes from 'prop-types';
+import React from 'react';
+import pickBy from 'lodash.pickby';
+import sortBy from 'lodash.sortby';
 import classnames from 'classnames';
-import { getQueryDefinition } from 'apollo-client';
-import { parse } from 'graphql-tag/parser';
+import { getOperationName } from 'apollo-utilities';
+import { parse } from 'graphql/language/parser';
 import { GraphqlCodeBlock } from 'graphql-syntax-highlighter-react';
 import { Sidebar } from '../Sidebar';
 import Warning from '../Images/Warning';
 
 import './WatchedQueries.less';
 
-const queryNameFromQueryString = queryString => {
-  const doc = parse(queryString);
-  const queryDefinition = getQueryDefinition(doc);
-  if (queryDefinition.name && queryDefinition.name.value) {
-    return queryDefinition.name.value;
-  }
-  return null;
-};
-
 const queryLabel = (queryId, query) => {
-  const queryName = queryNameFromQueryString(query.queryString);
+  const queryName = getOperationName(parse(query.queryString));
   if (queryName === null) {
     return queryId;
   }
@@ -191,7 +182,7 @@ const GraphQLError = ({ error }) =>
   </li>;
 GraphQLError.propTypes = {
   error: PropTypes.shape({
-    message: React.PropTypes.string
+    message: PropTypes.string
   })
 };