2-end-queries

Author: Carlos Rufo Jimenez

src/components/LinkList.js

@@ -1,29 +1,8 @@
 import React, { Component } from 'react'
 import Link from './Link'
-import { graphql } from 'react-apollo'
+import { Query } from 'react-apollo'
 import gql from 'graphql-tag'
 
-class LinkList extends Component {
-    render() {
-        // 1
-        if (this.props.feedQuery && this.props.feedQuery.loading) {
-          return <div>Loading</div>
-        }
-      
-        // 2
-        if (this.props.feedQuery && this.props.feedQuery.error) {
-          return <div>Error</div>
-        }
-      
-        // 3
-        const linksToRender = this.props.feedQuery.feed.links
-      
-        return (
-          <div>{linksToRender.map(link => <Link key={link.id} link={link} />)}</div>
-        )
-      }
-}
-
 // 1
 const FEED_QUERY = gql`
   # 2
@@ -37,7 +16,24 @@ const FEED_QUERY = gql`
       }
     }
   }
-`
+`;
+
+class LinkList extends Component {
+    render() {
+        return (
+            <Query query={FEED_QUERY}>
+                {(result) => {
+                    if (result.loading) return <div>Loading</div>;
+                    if (result.error) return <div>Error</div>;
+                    
+                    const { data } = result;
+                    const linksToRender = data.feed.links;
+                    
+                    return <div>{linksToRender.map(link => <Link key={link.id} link={link} />)}</div>;
+                }}
+            </Query>
+        )
+    }
+}
 
-// 3
-export default graphql(FEED_QUERY, { name: 'feedQuery' }) (LinkList)
+export default LinkList;