10-GraphQL Caching of Queries with Apollo Client in React

Author: rwieruch

package-lock.json

@@ -13,6 +13,7 @@
     "react": "^16.6.0",
     "react-apollo": "^2.2.4",
     "react-dom": "^16.6.0",
+    "react-router-dom": "^4.3.1",
     "react-scripts": "2.0.5"
   },
   "scripts": {

package.json

@@ -0,0 +1,68 @@
+import React from 'react';
+import { Link, withRouter } from 'react-router-dom';
+
+import * as routes from '../../constants/routes';
+import Button from '../../Button';
+import Input from '../../Input';
+
+import './style.css';
+
+const Navigation = ({
+  location: { pathname },
+  organizationName,
+  onOrganizationSearch,
+}) => (
+  <header className="Navigation">
+    <div className="Navigation-link">
+      <Link to={routes.PROFILE}>Profile</Link>
+    </div>
+    <div className="Navigation-link">
+      <Link to={routes.ORGANIZATION}>Organization</Link>
+    </div>
+
+    {pathname === routes.ORGANIZATION && (
+      <OrganizationSearch
+        organizationName={organizationName}
+        onOrganizationSearch={onOrganizationSearch}
+      />
+    )}
+  </header>
+);
+
+class OrganizationSearch extends React.Component {
+  state = {
+    value: this.props.organizationName,
+  };
+
+  onChange = event => {
+    this.setState({ value: event.target.value });
+  };
+
+  onSubmit = event => {
+    this.props.onOrganizationSearch(this.state.value);
+
+    event.preventDefault();
+  };
+
+  render() {
+    const { value } = this.state;
+
+    return (
+      <div className="Navigation-search">
+        <form onSubmit={this.onSubmit}>
+          <Input
+            color={'white'}
+            type="text"
+            value={value}
+            onChange={this.onChange}
+          />{' '}
+          <Button color={'white'} type="submit">
+            Search
+          </Button>
+        </form>
+      </div>
+    );
+  }
+}
+
+export default withRouter(Navigation);

src/App/Navigation/index.js

@@ -1,10 +1,60 @@
 import React, { Component } from 'react';
+import { BrowserRouter as Router, Route } from 'react-router-dom';
 
+import Navigation from './Navigation';
+import Footer from './Footer';
 import Profile from '../Profile';
+import Organization from '../Organization';
+
+import * as routes from '../constants/routes';
+
+import './style.css';
 
 class App extends Component {
+  state = {
+    organizationName: 'the-road-to-learn-react',
+  };
+
+  onOrganizationSearch = value => {
+    this.setState({ organizationName: value });
+  };
+
   render() {
-    return <Profile />;
+    const { organizationName } = this.state;
+
+    return (
+      <Router>
+        <div className="App">
+          <Navigation
+            organizationName={organizationName}
+            onOrganizationSearch={this.onOrganizationSearch}
+          />
+
+          <div className="App-main">
+            <Route
+              exact
+              path={routes.ORGANIZATION}
+              component={() => (
+                <div className="App-content_large-header">
+                  <Organization organizationName={organizationName} />
+                </div>
+              )}
+            />
+            <Route
+              exact
+              path={routes.PROFILE}
+              component={() => (
+                <div className="App-content_small-header">
+                  <Profile />
+                </div>
+              )}
+            />
+          </div>
+
+          <Footer />
+        </div>
+      </Router>
+    );
   }
 }
 

src/App/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import './style.css';
+
+const Input = ({ children, color = 'black', ...props }) => (
+  <input className={`Input Input_${color}`} {...props}>
+    {children}
+  </input>
+);
+
+export default Input;

src/Input/index.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import gql from 'graphql-tag';
+import { Query } from 'react-apollo';
+
+import RepositoryList, { REPOSITORY_FRAGMENT } from '../Repository';
+import Loading from '../Loading';
+import ErrorMessage from '../Error';
+
+const GET_REPOSITORIES_OF_ORGANIZATION = gql`
+  query($organizationName: String!, $cursor: String) {
+    organization(login: $organizationName) {
+      repositories(first: 5, after: $cursor) {
+        edges {
+          node {
+            ...repository
+          }
+        }
+        pageInfo {
+          endCursor
+          hasNextPage
+        }
+      }
+    }
+  }
+  ${REPOSITORY_FRAGMENT}
+`;
+
+const Organization = ({ organizationName }) => (
+  <Query
+    query={GET_REPOSITORIES_OF_ORGANIZATION}
+    variables={{
+      organizationName,
+    }}
+    skip={organizationName === ''}
+    notifyOnNetworkStatusChange={true}
+  >
+    {({ data, loading, error, fetchMore }) => {
+      if (error) {
+        return <ErrorMessage error={error} />;
+      }
+
+      const { organization } = data;
+
+      if (loading && !organization) {
+        return <Loading />;
+      }
+
+      return (
+        <RepositoryList
+          loading={loading}
+          repositories={organization.repositories}
+          fetchMore={fetchMore}
+          entry={'organization'}
+        />
+      );
+    }}
+  </Query>
+);
+
+export default Organization;

src/Organization/index.js

@@ -51,6 +51,7 @@ const Profile = () => (
           loading={loading}
           repositories={viewer.repositories}
           fetchMore={fetchMore}
+          entry={'viewer'}
         />
       );
     }}

src/Profile/index.js

@@ -5,28 +5,36 @@ import RepositoryItem from '../RepositoryItem';
 
 import '../style.css';
 
-const updateQuery = (previousResult, { fetchMoreResult }) => {
+const getUpdateQuery = entry => (
+  previousResult,
+  { fetchMoreResult },
+) => {
   if (!fetchMoreResult) {
     return previousResult;
   }
 
   return {
     ...previousResult,
-    viewer: {
-      ...previousResult.viewer,
+    [entry]: {
+      ...previousResult[entry],
       repositories: {
-        ...previousResult.viewer.repositories,
-        ...fetchMoreResult.viewer.repositories,
+        ...previousResult[entry].repositories,
+        ...fetchMoreResult[entry].repositories,
         edges: [
-          ...previousResult.viewer.repositories.edges,
-          ...fetchMoreResult.viewer.repositories.edges,
+          ...previousResult[entry].repositories.edges,
+          ...fetchMoreResult[entry].repositories.edges,
         ],
       },
     },
   };
 };
 
-const RepositoryList = ({ repositories, loading, fetchMore }) => (
+const RepositoryList = ({
+  repositories,
+  loading,
+  fetchMore,
+  entry,
+}) => (
   <Fragment>
     {repositories.edges.map(({ node }) => (
       <div key={node.id} className="RepositoryItem">
@@ -40,7 +48,7 @@ const RepositoryList = ({ repositories, loading, fetchMore }) => (
       variables={{
         cursor: repositories.pageInfo.endCursor,
       }}
-      updateQuery={updateQuery}
+      updateQuery={getUpdateQuery(entry)}
       fetchMore={fetchMore}
     >
       Repositories

src/Repository/RepositoryList/index.js

@@ -0,0 +1,2 @@
+export const ORGANIZATION = '/';
+export const PROFILE = '/profile';