add mutation mock

Author: rwieruch

package-lock.json

@@ -9,6 +9,7 @@
     "apollo-link-schema": "^1.1.0",
     "graphql": "^0.13.2",
     "graphql-tag": "^2.9.2",
+    "graphql-tools": "^3.0.1",
     "react": "^16.3.2",
     "react-apollo": "^2.1.4",
     "react-dom": "^16.3.2",

package.json

@@ -1,28 +1,124 @@
 import React from 'react';
 import gql from 'graphql-tag';
-import { Query } from 'react-apollo';
+import { Query, Mutation } from 'react-apollo';
 
 import './App.css';
 
-const GET_ORGANIZATION = gql`
+const GET_REPOSITORIES_OF_ORGANIZATION = gql`
   {
     organization(login: "the-road-to-learn-react") {
-      name
-      url
+      repositories(first: 20) {
+        edges {
+          node {
+            id
+            name
+            url
+            viewerHasStarred
+          }
+        }
+      }
+    }
+  }
+`;
+
+const STAR_REPOSITORY = gql`
+  mutation($id: ID!) {
+    addStar(input: { starrableId: $id }) {
+      starrable {
+        id
+        viewerHasStarred
+      }
     }
   }
 `;
 
 const App = () => (
-  <Query query={GET_ORGANIZATION}>
+  <Query query={GET_REPOSITORIES_OF_ORGANIZATION}>
     {({ data: { organization }, loading }) => {
       if (loading || !organization) {
         return <div>Loading ...</div>;
       }
 
-      return <a href={organization.url}>{organization.name}</a>;
+      return (
+        <Repositories repositories={organization.repositories} />
+      );
     }}
   </Query>
 );
 
+class Repositories extends React.Component {
+  state = {
+    selectedRepositoryIds: [],
+  };
+
+  toggleSelectRepository = (id, isSelected) => {
+    let { selectedRepositoryIds } = this.state;
+
+    selectedRepositoryIds = isSelected
+      ? selectedRepositoryIds.filter(itemId => itemId !== id)
+      : selectedRepositoryIds.concat(id);
+
+    this.setState({ selectedRepositoryIds });
+  };
+
+  render() {
+    return (
+      <RepositoryList
+        repositories={this.props.repositories}
+        selectedRepositoryIds={this.state.selectedRepositoryIds}
+        toggleSelectRepository={this.toggleSelectRepository}
+      />
+    );
+  }
+}
+
+const RepositoryList = ({
+  repositories,
+  selectedRepositoryIds,
+  toggleSelectRepository,
+}) => (
+  <ul>
+    {repositories.edges.map(({ node }) => {
+      const isSelected = selectedRepositoryIds.includes(node.id);
+
+      const rowClassName = ['row'];
+
+      if (isSelected) {
+        rowClassName.push('row_selected');
+      }
+
+      return (
+        <li className={rowClassName.join(' ')} key={node.id}>
+          <Select
+            id={node.id}
+            isSelected={isSelected}
+            toggleSelectRepository={toggleSelectRepository}
+          />{' '}
+          <a href={node.url}>{node.name}</a>{' '}
+          {!node.viewerHasStarred && <Star id={node.id} />}
+        </li>
+      );
+    })}
+  </ul>
+);
+
+const Star = ({ id }) => (
+  <Mutation mutation={STAR_REPOSITORY} variables={{ id }}>
+    {starRepository => (
+      <button type="button" onClick={starRepository}>
+        Star
+      </button>
+    )}
+  </Mutation>
+);
+
+const Select = ({ id, isSelected, toggleSelectRepository }) => (
+  <button
+    type="button"
+    onClick={() => toggleSelectRepository(id, isSelected)}
+  >
+    {isSelected ? 'Unselect' : 'Select'}
+  </button>
+);
+
 export default App;

src/App.js

@@ -6,14 +6,75 @@ export const typeDefs = `
   type Organization {
     name: String!
     url: String!
+    repositories: RepositoryConnection!
+  }
+
+  type RepositoryConnection {
+    edges: [RepositoryEdge!]!
+  }
+
+  type RepositoryEdge {
+    node: Repository!
+  }
+
+  type Repository {
+    id: String!
+    name: String!
+    url: String!
+    viewerHasStarred: Boolean!
+  }
+
+  type Mutation {
+    addStar(input: AddStarInput!): AddStarResult!
+  }
+
+  input AddStarInput {
+    starrableId: ID!
+  }
+
+  type AddStarResult {
+    starrable: Starrable!
+  }
+
+  type Starrable {
+    id: ID!
+    viewerHasStarred: Boolean!
   }
 `;
 
 export const resolvers = {
+  Mutation: {
+    addStar: (parent, { input }) => ({
+      starrable: {
+        id: input.starrableId,
+        viewerHasStarred: true,
+      },
+    }),
+  },
   Query: {
     organization: (parent, { login }) => ({
       name: login,
       url: `https://github.com/${login}`,
+      repositories: {
+        edges: [
+          {
+            node: {
+              id: '1',
+              name: 'the-road-to-learn-react',
+              url: `https://github.com/${login}/the-road-to-learn-react`,
+              viewerHasStarred: false,
+            },
+          },
+          {
+            node: {
+              id: '2',
+              name: 'the-road-to-learn-react-chinese',
+              url: `https://github.com/${login}/the-road-to-learn-react-chinese`,
+              viewerHasStarred: false,
+            },
+          },
+        ],
+      },
     }),
   },
 };