refactor Mutation and Query components

Author: rwieruch

example/src/App.js

@@ -63,24 +63,22 @@ const resolveFetchMore = (data, state) => {
 };
 
 const resolveWatchMutation = (data, state) => {
-  const { totalCount } = state.data.updateSubscription.subscribable;
+  const { totalCount } = state.data.repository;
   const { viewerSubscription } = data.updateSubscription.subscribable;
 
   return {
-    updateSubscription: {
-      subscribable: {
-        viewerSubscription,
-        totalCount:
-          viewerSubscription === 'SUBSCRIBED'
-            ? totalCount + 1
-            : totalCount - 1,
-      },
+    repository: {
+      viewerSubscription,
+      totalCount:
+        viewerSubscription === 'SUBSCRIBED'
+          ? totalCount + 1
+          : totalCount - 1,
     },
   };
 };
 
-const isWatch = updateSubscription =>
-  updateSubscription.subscribable.viewerSubscription === 'SUBSCRIBED';
+const isWatch = viewerSubscription =>
+  viewerSubscription === 'SUBSCRIBED';
 
 class App extends Component {
   state = {
@@ -191,12 +189,10 @@ const Repositories = ({ repositories, onFetchMoreRepositories }) => (
           <Mutation
             mutation={WATCH_REPOSITORY}
             initial={{
-              updateSubscription: {
-                subscribable: {
-                  viewerSubscription:
-                    repository.node.viewerSubscription,
-                  totalCount: repository.node.watchers.totalCount,
-                },
+              repository: {
+                viewerSubscription:
+                  repository.node.viewerSubscription,
+                totalCount: repository.node.watchers.totalCount,
               },
             }}
             resolveMutation={resolveWatchMutation}
@@ -209,16 +205,16 @@ const Repositories = ({ repositories, onFetchMoreRepositories }) => (
                     variables: {
                       id: repository.node.id,
                       viewerSubscription: isWatch(
-                        data.updateSubscription,
+                        data.repository.viewerSubscription,
                       )
                         ? 'UNSUBSCRIBED'
                         : 'SUBSCRIBED',
                     },
                   })
                 }
               >
-                {data.updateSubscription.subscribable.totalCount}
-                {isWatch(data.updateSubscription)
+                {data.repository.totalCount}
+                {isWatch(data.repository.viewerSubscription)
                   ? ' Unwatch'
                   : ' Watch'}
               </button>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-graphql-client",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "main": "lib/index.js",
   "peerDependencies": {
     "react": "^16.3.0",

src/my-client-react/Mutation.js

@@ -8,7 +8,7 @@ class Mutation extends React.Component {
     super(props);
 
     this.state = {
-      data: this.props.initial || null,
+      data: this.props.initial,
       loading: null,
       errors: null,
     };
@@ -29,19 +29,11 @@ class Mutation extends React.Component {
     client
       .mutate({ mutation, variables })
       .then(result => {
-        if (resolveMutation) {
-          this.setState(state => ({
-            data: resolveMutation(result.data.data, state),
-            errors: result.data.errors,
-            loading: false,
-          }));
-        } else {
-          this.setState({
-            data: result.data.data,
-            errors: result.data.errors,
-            loading: false,
-          });
-        }
+        this.setState(state => ({
+          data: resolveMutation(result.data.data, state),
+          errors: result.data.errors,
+          loading: false,
+        }));
       })
       .catch(error =>
         this.setState({

src/my-client-react/Query.js

@@ -43,10 +43,6 @@ class Query extends React.Component {
       );
   };
 
-  fetchMore = ({ query, variables }) => {
-    this.queryMore({ query, variables });
-  };
-
   queryMore = ({ query, variables }) => {
     this.props.client
       .query({ query, variables })
@@ -68,7 +64,7 @@ class Query extends React.Component {
   render() {
     return this.props.children({
       ...this.state,
-      fetchMore: this.fetchMore,
+      fetchMore: this.queryMore,
     });
   }
 }