2.3-end-queries-v2.1

Author: Carlos Rufo Jimenez

src/components/App.js

@@ -1,21 +1,4 @@
-import React, { Component } from 'react';
-import logo from '../logo.svg';
-import '../styles/App.css';
+import React from 'react'
+import LinkList from './LinkList'
 
-class App extends Component {
-  render() {
-    return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h1 className="App-title">Welcome to React</h1>
-        </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
-      </div>
-    );
-  }
-}
-
-export default App;
+export default () => <LinkList />

src/components/Link.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default ({ link }) => (
+  <div>
+    {link.description} ({link.url})
+  </div>
+)

src/components/LinkList.js

@@ -0,0 +1,49 @@
+import React from 'react'
+import Link from './Link'
+import { Query } from 'react-apollo'
+import gql from 'graphql-tag'
+
+const FEED_QUERY = gql`
+  {
+    feed {
+      links {
+        id
+        createdAt
+        url
+        description
+      }
+    }
+  }
+`
+
+export default () => {
+  const linksToRender = [
+    {
+      id: '1',
+      description: 'Prisma turns your database into a GraphQL API 😎',
+      url: 'https://www.prismagraphql.com'
+    },
+    {
+      id: '2',
+      description: 'The best GraphQL client',
+      url: 'https://www.apollographql.com/docs/react/'
+    }
+  ]
+
+  return (
+    <Query query={FEED_QUERY}>
+      {({ loading, error, data }) => {
+        if (loading) return <div>Fetching</div>
+        if (error) return <div>Error</div>
+
+        const linksToRender = data.feed.links
+
+        return (
+          <div>
+            {linksToRender.map(link => <Link key={link.id} link={link} />)}
+          </div>
+        )
+      }}
+    </Query>
+  )
+}