06-GraphQL Query/Mutation with Higher-Order Components in React

Author: rwieruch

src/Profile/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import gql from 'graphql-tag';
-import { Query } from 'react-apollo';
+import { graphql } from 'react-apollo';
 
 import RepositoryList from '../Repository';
 import Loading from '../Loading';
@@ -41,22 +41,18 @@ const GET_REPOSITORIES_OF_CURRENT_USER = gql`
   }
 `;
 
-const Profile = () => (
-  <Query query={GET_REPOSITORIES_OF_CURRENT_USER}>
-    {({ data, loading, error }) => {
-      if (error) {
-        return <ErrorMessage error={error} />;
-      }
+const Profile = ({ data, loading, error }) => {
+  if (error) {
+    return <ErrorMessage error={error} />;
+  }
 
-      const { viewer } = data;
+  const { viewer } = data;
 
-      if (loading || !viewer) {
-        return <Loading />;
-      }
+  if (loading || !viewer) {
+    return <Loading />;
+  }
 
-      return <RepositoryList repositories={viewer.repositories} />;
-    }}
-  </Query>
-);
+  return <RepositoryList repositories={viewer.repositories} />;
+};
 
-export default Profile;
+export default graphql(GET_REPOSITORIES_OF_CURRENT_USER)(Profile);