07-Local State Management with Apollo Client in React

Author: rwieruch

src/Profile/index.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import gql from 'graphql-tag';
-import { graphql } from 'react-apollo';
+import { Query } from 'react-apollo';
 
-import RepositoryList from '../Repository';
+import RepositoryList, { REPOSITORY_FRAGMENT } from '../Repository';
 import Loading from '../Loading';
 import ErrorMessage from '../Error';
 
@@ -15,44 +15,32 @@ const GET_REPOSITORIES_OF_CURRENT_USER = gql`
       ) {
         edges {
           node {
-            id
-            name
-            url
-            descriptionHTML
-            primaryLanguage {
-              name
-            }
-            owner {
-              login
-              url
-            }
-            stargazers {
-              totalCount
-            }
-            viewerHasStarred
-            watchers {
-              totalCount
-            }
-            viewerSubscription
+            ...repository
           }
         }
       }
     }
   }
+
+  ${REPOSITORY_FRAGMENT}
 `;
 
-const Profile = ({ data, loading, error }) => {
-  if (error) {
-    return <ErrorMessage error={error} />;
-  }
+const Profile = () => (
+  <Query query={GET_REPOSITORIES_OF_CURRENT_USER}>
+    {({ data, loading, error }) => {
+      if (error) {
+        return <ErrorMessage error={error} />;
+      }
 
-  const { viewer } = data;
+      const { viewer } = data;
 
-  if (loading || !viewer) {
-    return <Loading />;
-  }
+      if (loading || !viewer) {
+        return <Loading />;
+      }
 
-  return <RepositoryList repositories={viewer.repositories} />;
-};
+      return <RepositoryList repositories={viewer.repositories} />;
+    }}
+  </Query>
+);
 
-export default graphql(GET_REPOSITORIES_OF_CURRENT_USER)(Profile);
+export default Profile;

src/Repository/RepositoryItem/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Mutation } from 'react-apollo';
 
+import REPOSITORY_FRAGMENT from '../fragments';
 import Link from '../../Link';
 import Button from '../../Button';
 
@@ -20,6 +21,91 @@ const VIEWER_SUBSCRIPTIONS = {
 const isWatch = viewerSubscription =>
   viewerSubscription === VIEWER_SUBSCRIPTIONS.SUBSCRIBED;
 
+const updateWatch = (
+  client,
+  {
+    data: {
+      updateSubscription: {
+        subscribable: { id, viewerSubscription },
+      },
+    },
+  },
+) => {
+  const repository = client.readFragment({
+    id: `Repository:${id}`,
+    fragment: REPOSITORY_FRAGMENT,
+  });
+
+  let { totalCount } = repository.watchers;
+  totalCount =
+    viewerSubscription === VIEWER_SUBSCRIPTIONS.SUBSCRIBED
+      ? totalCount + 1
+      : totalCount - 1;
+
+  client.writeFragment({
+    id: `Repository:${id}`,
+    fragment: REPOSITORY_FRAGMENT,
+    data: {
+      ...repository,
+      watchers: {
+        ...repository.watchers,
+        totalCount,
+      },
+    },
+  });
+};
+
+const updateAddStar = (
+  client,
+  {
+    data: {
+      addStar: {
+        starrable: { id, viewerHasStarred },
+      },
+    },
+  },
+) =>
+  client.writeFragment({
+    id: `Repository:${id}`,
+    fragment: REPOSITORY_FRAGMENT,
+    data: getUpdatedStarData(client, id, viewerHasStarred),
+  });
+
+const updateRemoveStar = (
+  client,
+  {
+    data: {
+      removeStar: {
+        starrable: { id, viewerHasStarred },
+      },
+    },
+  },
+) => {
+  client.writeFragment({
+    id: `Repository:${id}`,
+    fragment: REPOSITORY_FRAGMENT,
+    data: getUpdatedStarData(client, id, viewerHasStarred),
+  });
+};
+
+const getUpdatedStarData = (client, id, viewerHasStarred) => {
+  const repository = client.readFragment({
+    id: `Repository:${id}`,
+    fragment: REPOSITORY_FRAGMENT,
+  });
+
+  let { totalCount } = repository.stargazers;
+  totalCount = viewerHasStarred ? totalCount + 1 : totalCount - 1;
+
+  return {
+    ...repository,
+    stargazers: {
+      ...repository.stargazers,
+      totalCount,
+    },
+  };
+};
+
 const RepositoryItem = ({
   id,
   name,
@@ -47,6 +133,7 @@ const RepositoryItem = ({
               ? VIEWER_SUBSCRIPTIONS.UNSUBSCRIBED
               : VIEWER_SUBSCRIPTIONS.SUBSCRIBED,
           }}
+          update={updateWatch}
         >
           {(updateSubscription, { data, loading, error }) => (
             <Button
@@ -61,7 +148,11 @@ const RepositoryItem = ({
         </Mutation>
 
         {!viewerHasStarred ? (
-          <Mutation mutation={STAR_REPOSITORY} variables={{ id }}>
+          <Mutation
+            mutation={STAR_REPOSITORY}
+            variables={{ id }}
+            update={updateAddStar}
+          >
             {(addStar, { data, loading, error }) => (
               <Button
                 className={'RepositoryItem-title-action'}
@@ -72,7 +163,11 @@ const RepositoryItem = ({
             )}
           </Mutation>
         ) : (
-          <Mutation mutation={UNSTAR_REPOSITORY} variables={{ id }}>
+          <Mutation
+            mutation={UNSTAR_REPOSITORY}
+            variables={{ id }}
+            update={updateRemoveStar}
+          >
             {(removeStar, { data, loading, error }) => (
               <Button
                 className="RepositoryItem-title-action"
@@ -83,8 +178,6 @@ const RepositoryItem = ({
             )}
           </Mutation>
         )}
-
-        {/* Here comes your updateSubscription mutation */}
       </div>
     </div>
 

src/Repository/fragments.js

@@ -0,0 +1,27 @@
+import gql from 'graphql-tag';
+
+const REPOSITORY_FRAGMENT = gql`
+  fragment repository on Repository {
+    id
+    name
+    url
+    descriptionHTML
+    primaryLanguage {
+      name
+    }
+    owner {
+      login
+      url
+    }
+    stargazers {
+      totalCount
+    }
+    viewerHasStarred
+    watchers {
+      totalCount
+    }
+    viewerSubscription
+  }
+`;
+
+export default REPOSITORY_FRAGMENT;

src/Repository/index.js

@@ -1,3 +1,6 @@
 import RepositoryList from './RepositoryList';
+import REPOSITORY_FRAGMENT from './fragments';
+
+export { REPOSITORY_FRAGMENT };
 
 export default RepositoryList;