Add STARS_SUBSCRIPTION

Author: lorensr

src/components/StarCount.js

@@ -5,20 +5,44 @@ import gql from 'graphql-tag'
 import classNames from 'classnames'
 import Odometer from 'react-odometerjs'
 
-const StarCount = ({ githubStars, loading }) => {
-  return (
-    <a
-      className={classNames('StarCount', { loading })}
-      href="https://github.com/GraphQLGuide/guide"
-    >
-      {githubStars && <Odometer value={githubStars} />}
-    </a>
-  )
+class StarCount extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {}
+  }
+
+  componentDidMount() {
+    this.props.subscribeToMore({
+      document: STARS_SUBSCRIPTION,
+      updateQuery: (
+        previousResult,
+        {
+          subscriptionData: {
+            data: { githubStars }
+          }
+        }
+      ) => ({ githubStars })
+    })
+  }
+
+  render() {
+    const { githubStars, loading } = this.props
+
+    return (
+      <a
+        className={classNames('StarCount', { loading })}
+        href="https://github.com/GraphQLGuide/guide"
+      >
+        {githubStars && <Odometer value={githubStars} />}
+      </a>
+    )
+  }
 }
 
 StarCount.propTypes = {
   githubStars: PropTypes.number,
-  loading: PropTypes.bool.isRequired
+  loading: PropTypes.bool.isRequired,
+  subscribeToMore: PropTypes.func.isRequired
 }
 
 const STARS_QUERY = gql`
@@ -27,10 +51,20 @@ const STARS_QUERY = gql`
   }
 `
 
+const STARS_SUBSCRIPTION = gql`
+  subscription StarsSubscription {
+    githubStars
+  }
+`
+
 export default () => (
-  <Query query={STARS_QUERY} pollInterval={5 * 1000}>
-    {({ data: { githubStars }, loading }) => (
-      <StarCount githubStars={githubStars} loading={loading} />
+  <Query query={STARS_QUERY}>
+    {({ data: { githubStars }, loading, subscribeToMore }) => (
+      <StarCount
+        githubStars={githubStars}
+        loading={loading}
+        subscribeToMore={subscribeToMore}
+      />
     )}
   </Query>
 )

src/index.js

@@ -6,12 +6,31 @@ import registerServiceWorker from './registerServiceWorker'
 import { ApolloClient } from 'apollo-client'
 import { ApolloProvider } from 'react-apollo'
 import { InMemoryCache } from 'apollo-cache-inmemory'
+import { split } from 'apollo-link'
+import { WebSocketLink } from 'apollo-link-ws'
 import { createHttpLink } from 'apollo-link-http'
+import { getMainDefinition } from 'apollo-utilities'
 
-const link = createHttpLink({
+const httpLink = createHttpLink({
   uri: 'https://api.graphql.guide/graphql'
 })
 
+const wsLink = new WebSocketLink({
+  uri: `wss://api.graphql.guide/subscriptions`,
+  options: {
+    reconnect: true
+  }
+})
+
+const link = split(
+  ({ query }) => {
+    const { kind, operation } = getMainDefinition(query)
+    return kind === 'OperationDefinition' && operation === 'subscription'
+  },
+  wsLink,
+  httpLink
+)
+
 const cache = new InMemoryCache()
 
 const client = new ApolloClient({ link, cache })