Pass component display name to watchQuery metadata. (#363)

Metadata is a new feature added in [email protected]. It's OK to pass the option in to older clients; it will just be ignored. This will be used by Apollo Chrome DevTools!
apollographql · Dec 9, 2016 · 02fe991 · 02fe991
1 parent fc3ec89
commit 02fe991
Show file tree

Hide file tree

Showing 5 changed files with 225 additions and 233 deletions.
diff --git a/Changelog.md b/Changelog.md
@@ -17,6 +17,8 @@ import { getDataFromTree, renderToStringWithData } from 'react-apollo'
 
 - Feature: Add networkStatus prop to connected components[Issue #322](https://github.com/apollostack/react-apollo/issues/322)
 
+- Feature: Pass component display name as watchQuery metadata for experimental devtools [PR #363](https://github.com/apollostack/react-apollo/pull/363)
+
 - Bug: fix issue with Redux's `connect` and SSR - [Issue #350](https://github.com/apollostack/react-apollo/issues/350)
 
 ### v0.6.0

diff --git a/package.json b/package.json
@@ -85,7 +85,7 @@
     "@types/redux-form": "^4.0.29",
     "@types/redux-immutable": "^3.0.30",
     "@types/sinon": "^1.16.29",
-    "apollo-client": "0.5.11",
+    "apollo-client": "0.5.13",
     "babel-jest": "^14.1.0",
     "babel-preset-react-native": "^1.9.0",
     "browserify": "^13.0.0",

diff --git a/src/graphql.tsx b/src/graphql.tsx
@@ -307,6 +307,11 @@ export default function graphql(
         } else {
           this.queryObservable = this.client.watchQuery(assign({
             query: document,
+            metadata: {
+              reactComponent: {
+                displayName: graphQLDisplayName,
+              },
+            },
           }, opts));
         }
       }

diff --git a/test/react-web/client/graphql/queries.test.tsx b/test/react-web/client/graphql/queries.test.tsx
@@ -1968,5 +1968,38 @@ describe('queries', () => {
      };
 
      mount(<ApolloProvider client={client}><Container /></ApolloProvider>);
-   });
+  });
+
+  it('stores the component name in the query metadata', (done) => {
+    const query = gql`query people { allPeople(first: 1) { people { name } } }`;
+    const data = { allPeople: { people: [ { name: 'Luke Skywalker' } ] } };
+    const networkInterface = mockNetworkInterface({ request: { query }, result: { data } });
+    const client = new ApolloClient({ networkInterface, addTypename: false });
+
+    @graphql(query)
+    class Container extends React.Component<any, any> {
+      componentWillReceiveProps(props) {
+        const queries = client.queryManager.getApolloState().queries;
+        const queryIds = Object.keys(queries);
+        expect(queryIds.length).toEqual(1);
+        const query = queries[queryIds[0]];
+        expect(query.metadata).toEqual({
+          reactComponent: {
+            displayName: 'Apollo(Container)',
+          },
+        });
+        done();
+      }
+      render() {
+        return null;
+      }
+    }
+
+    renderer.create(
+      <ApolloProvider client={client}>
+        <Container />
+      </ApolloProvider>
+    );
+  });
+
 });