Add <StarCount />

Author: lorensr

package-lock.json

@@ -1,11 +1,13 @@
 import React, { Component } from 'react'
 import logo from '../logo.svg'
+import StarCount from './StarCount'
 
 class App extends Component {
   render() {
     return (
       <div className="App">
         <header className="App-header">
+          <StarCount />
           <img src={logo} className="App-logo" alt="logo" />
           <h1 className="App-title">The GraphQL Guide</h1>
         </header>

src/components/App.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Query } from 'react-apollo'
+import gql from 'graphql-tag'
+
+const StarCount = ({ githubStars, loading }) => {
+  return (
+    <a className="StarCount" href="https://github.com/GraphQLGuide/guide">
+      {githubStars}
+    </a>
+  )
+}
+
+StarCount.propTypes = {
+  githubStars: PropTypes.number,
+  loading: PropTypes.bool.isRequired
+}
+
+const STARS_QUERY = gql`
+  query StarsQuery {
+    githubStars
+  }
+`
+
+export default () => (
+  <Query query={STARS_QUERY}>
+    {({ data: { githubStars }, loading }) => (
+      <StarCount githubStars={githubStars} loading={loading} />
+    )}
+  </Query>
+)

src/components/StarCount.js

@@ -3,8 +3,25 @@ import ReactDOM from 'react-dom'
 import './index.css'
 import App from './components/App'
 import registerServiceWorker from './registerServiceWorker'
+import { ApolloClient } from 'apollo-client'
+import { ApolloProvider } from 'react-apollo'
+import { InMemoryCache } from 'apollo-cache-inmemory'
+import { createHttpLink } from 'apollo-link-http'
 
-ReactDOM.render(<App />, document.getElementById('root'))
+const link = createHttpLink({
+  uri: 'https://api.graphql.guide/graphql'
+})
+
+const cache = new InMemoryCache()
+
+const client = new ApolloClient({ link, cache })
+
+ReactDOM.render(
+  <ApolloProvider client={client}>
+    <App />
+  </ApolloProvider>,
+  document.getElementById('root')
+)
 
 registerServiceWorker()