simple mock

Author: rwieruch

package-lock.json

@@ -7,7 +7,6 @@
     "apollo-client": "^2.3.0",
     "apollo-link-http": "^1.5.4",
     "apollo-link-schema": "^1.1.0",
-    "apollo-test-utils": "^0.3.2",
     "graphql": "^0.13.2",
     "graphql-tag": "^2.9.2",
     "react": "^16.3.2",

package.json

@@ -1,124 +1,28 @@
 import React from 'react';
 import gql from 'graphql-tag';
-import { Query, Mutation } from 'react-apollo';
+import { Query } from 'react-apollo';
 
 import './App.css';
 
-const GET_REPOSITORIES_OF_ORGANIZATION = gql`
+const GET_ORGANIZATION = gql`
   {
     organization(login: "the-road-to-learn-react") {
-      repositories(first: 20) {
-        edges {
-          node {
-            id
-            name
-            url
-            viewerHasStarred
-          }
-        }
-      }
-    }
-  }
-`;
-
-const STAR_REPOSITORY = gql`
-  mutation($id: ID!) {
-    addStar(input: { starrableId: $id }) {
-      starrable {
-        id
-        viewerHasStarred
-      }
+      name
+      url
     }
   }
 `;
 
 const App = () => (
-  <Query query={GET_REPOSITORIES_OF_ORGANIZATION}>
+  <Query query={GET_ORGANIZATION}>
     {({ data: { organization }, loading }) => {
       if (loading || !organization) {
         return <div>Loading ...</div>;
       }
 
-      return (
-        <Repositories repositories={organization.repositories} />
-      );
+      return <a href={organization.url}>{organization.name}</a>;
     }}
   </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

@@ -3,17 +3,13 @@ import ReactDOM from 'react-dom';
 import { ApolloProvider } from 'react-apollo';
 import { ApolloClient } from 'apollo-client';
 // import { HttpLink } from 'apollo-link-http';
-import { SchemaLink } from 'apollo-link-schema';
 import { InMemoryCache } from 'apollo-cache-inmemory';
 
-import {
-  makeExecutableSchema,
-  addMockFunctionsToSchema,
-} from 'graphql-tools';
-import { mockNetworkInterfaceWithSchema } from 'apollo-test-utils';
+import { SchemaLink } from 'apollo-link-schema';
+import { makeExecutableSchema } from 'graphql-tools';
 
 import App from './App';
-import { typeDefs, mocks } from './schema';
+import { typeDefs, resolvers } from './schema';
 
 import registerServiceWorker from './registerServiceWorker';
 
@@ -30,11 +26,7 @@ const cache = new InMemoryCache();
 //   },
 // });
 
-const schema = makeExecutableSchema({ typeDefs });
-addMockFunctionsToSchema({
-  schema,
-  mocks,
-});
+const schema = makeExecutableSchema({ typeDefs, resolvers });
 
 const client = new ApolloClient({
   // link: httpLink,

src/index.js

@@ -1,10 +1,19 @@
 export const typeDefs = `
-  Query {
-  ...
+  type Query {
+    organization(login: String!): Organization!
+  }
+
+  type Organization {
+    name: String!
+    url: String!
   }
 `;
 
-export const mocks = {
-  Query: () => ...,
-  Mutation: () => ...
-};
+export const resolvers = {
+  Query: {
+    organization: (parent, { login }) => ({
+      name: login,
+      url: `https://github.com/${login}`,
+    }),
+  },
+};