05-GraphQL Mutation with Apollo Client in React

Author: rwieruch

src/Button/index.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import './style.css';
+
+const Button = ({
+  children,
+  className,
+  color = 'black',
+  type = 'button',
+  ...props
+}) => (
+  <button
+    className={`${className} Button Button_${color}`}
+    type={type}
+    {...props}
+  >
+    {children}
+  </button>
+);
+
+export default Button;

src/Repository/RepositoryItem/index.js

@@ -1,10 +1,27 @@
 import React from 'react';
+import { Mutation } from 'react-apollo';
 
 import Link from '../../Link';
+import Button from '../../Button';
 
 import '../style.css';
 
+import {
+  STAR_REPOSITORY,
+  UNSTAR_REPOSITORY,
+  WATCH_REPOSITORY,
+} from '../mutations';
+
+const VIEWER_SUBSCRIPTIONS = {
+  SUBSCRIBED: 'SUBSCRIBED',
+  UNSUBSCRIBED: 'UNSUBSCRIBED',
+};
+
+const isWatch = viewerSubscription =>
+  viewerSubscription === VIEWER_SUBSCRIPTIONS.SUBSCRIBED;
+
 const RepositoryItem = ({
+  id,
   name,
   url,
   descriptionHTML,
@@ -21,8 +38,53 @@ const RepositoryItem = ({
         <Link href={url}>{name}</Link>
       </h2>
 
-      <div className="RepositoryItem-title-action">
-        {stargazers.totalCount} Stars
+      <div>
+        <Mutation
+          mutation={WATCH_REPOSITORY}
+          variables={{
+            id,
+            viewerSubscription: isWatch(viewerSubscription)
+              ? VIEWER_SUBSCRIPTIONS.UNSUBSCRIBED
+              : VIEWER_SUBSCRIPTIONS.SUBSCRIBED,
+          }}
+        >
+          {(updateSubscription, { data, loading, error }) => (
+            <Button
+              className="RepositoryItem-title-action"
+              data-test-id="updateSubscription"
+              onClick={updateSubscription}
+            >
+              {watchers.totalCount}{' '}
+              {isWatch(viewerSubscription) ? 'Unwatch' : 'Watch'}
+            </Button>
+          )}
+        </Mutation>
+
+        {!viewerHasStarred ? (
+          <Mutation mutation={STAR_REPOSITORY} variables={{ id }}>
+            {(addStar, { data, loading, error }) => (
+              <Button
+                className={'RepositoryItem-title-action'}
+                onClick={addStar}
+              >
+                {stargazers.totalCount} Star
+              </Button>
+            )}
+          </Mutation>
+        ) : (
+          <Mutation mutation={UNSTAR_REPOSITORY} variables={{ id }}>
+            {(removeStar, { data, loading, error }) => (
+              <Button
+                className="RepositoryItem-title-action"
+                onClick={removeStar}
+              >
+                {stargazers.totalCount} Unstar
+              </Button>
+            )}
+          </Mutation>
+        )}
+
+        {/* Here comes your updateSubscription mutation */}
       </div>
     </div>
 

src/Repository/mutations.js

@@ -0,0 +1,36 @@
+import gql from 'graphql-tag';
+
+export const STAR_REPOSITORY = gql`
+  mutation($id: ID!) {
+    addStar(input: { starrableId: $id }) {
+      starrable {
+        id
+        viewerHasStarred
+      }
+    }
+  }
+`;
+
+export const UNSTAR_REPOSITORY = gql`
+  mutation($id: ID!) {
+    removeStar(input: { starrableId: $id }) {
+      starrable {
+        id
+        viewerHasStarred
+      }
+    }
+  }
+`;
+
+export const WATCH_REPOSITORY = gql`
+  mutation($id: ID!, $viewerSubscription: SubscriptionState!) {
+    updateSubscription(
+      input: { state: $viewerSubscription, subscribableId: $id }
+    ) {
+      subscribable {
+        id
+        viewerSubscription
+      }
+    }
+  }
+`;