cancel request example illustration

Author: nirus

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 .DS_Store
-.env
+.env
+final/server/store.sqlite

final/client/package.json

@@ -3,20 +3,23 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@apollo/client": "^3.0.2",
-    "@reach/router": "^1.2.1",
-    "@types/node": "^12.12.14",
+    "@apollo/client": "^3.1.5",
+    "@reach/router": "^1.3.4",
+    "@types/node": "^12.12.58",
     "@types/reach__router": "^1.2.6",
-    "@types/react": "^16.9.15",
+    "@types/react": "^16.9.49",
     "@types/react-dom": "^16.9.4",
+    "@types/uuid": "^8.3.0",
     "emotion": "^9.2.12",
-    "graphql": "^14.4.2",
-    "polished": "^3.4.1",
+    "graphql": "^14.7.0",
+    "polished": "^3.6.6",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-emotion": "^9.2.12",
-    "react-scripts": "^3.4.1",
-    "typescript": "^3.7.3"
+    "react-scripts": "^3.4.3",
+    "shortid": "^2.2.15",
+    "typescript": "^3.9.7",
+    "uuid": "^8.3.0"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -39,8 +42,9 @@
     "@testing-library/jest-dom": "^4.0.0",
     "@testing-library/react": "^8.0.7",
     "@types/jest": "^24.0.23",
-    "apollo": "^2.16.3",
-    "artillery": "^1.6.0-26",
+    "@types/shortid": "0.0.29",
+    "apollo": "^2.30.3",
+    "artillery": "^1.6.1",
     "npm-watch": "^0.6.0"
   }
 }

final/client/src/cancelRequest.ts

@@ -0,0 +1,54 @@
+import {
+    ApolloLink,
+    Observable
+} from '@apollo/client';
+
+
+const connections: { [key: string]: any } = {};
+
+export const cancelRequestLink = new ApolloLink(
+    (operation, forward) =>
+        new Observable(observer => {
+            // Set x-CSRF token (not related to abort use case)
+            const context = operation.getContext();
+            /** Final touch to cleanup */
+            
+            const connectionHandle = forward(operation).subscribe({
+                next: (...arg) => observer.next(...arg),
+                error: (...arg) => {
+                    cleanUp();
+                    observer.error(...arg);
+                },
+                complete: (...arg) => {
+                    cleanUp();
+                    observer.complete(...arg)
+                }
+            });
+
+            const cleanUp = () => {
+                connectionHandle?.unsubscribe();
+                delete connections[context.requestTrackerId];
+            }
+
+            if (context.requestTrackerId) {
+                const controller = new AbortController();
+                controller.signal.onabort = cleanUp;
+                operation.setContext({
+                    ...context,
+                    fetchOptions: {
+                        signal: controller.signal,
+                        ...context?.fetchOptions
+                    },
+                });
+
+                if (connections[context.requestTrackerId]) {
+                    // If a controller exists, that means this operation should be aborted.
+                    connections[context.requestTrackerId]?.abort(); 
+                }
+
+                connections[context.requestTrackerId] = controller;
+            }
+
+            return connectionHandle;
+        })
+);

final/client/src/components/login-form.tsx

@@ -9,9 +9,12 @@ import { ReactComponent as Curve } from '../assets/curve.svg';
 import { ReactComponent as Rocket } from '../assets/rocket.svg';
 import { colors, unit } from '../styles';
 import * as LoginTypes from '../pages/__generated__/login';
+import { Loading } from '../components';
 
 interface LoginFormProps {
   login: (a: { variables: LoginTypes.LoginVariables }) => void;
+  error: any,
+  loading: boolean
 }
 
 interface LoginFormState {
@@ -32,6 +35,7 @@ export default class LoginForm extends Component<LoginFormProps, LoginFormState>
   };
 
   render() {
+    if (this.props.error) return <p>An error occurred</p>;
     return (
       <Container>
         <Header>
@@ -50,6 +54,7 @@ export default class LoginForm extends Component<LoginFormProps, LoginFormState>
             onChange={(e) => this.onChange(e)}
           />
           <Button type="submit">Log in</Button>
+          {this.props.loading ? <Loading /> : null}
         </StyledForm>
       </Container>
     );

final/client/src/index.tsx

@@ -6,7 +6,11 @@ import {
   ApolloProvider,
   useQuery,
   gql,
+  ApolloLink,
+  from,
+  createHttpLink,
 } from '@apollo/client';
+import { cancelRequestLink } from './cancelRequest';
 
 import Pages from './pages';
 import Login from './pages/login';
@@ -20,18 +24,29 @@ export const typeDefs = gql`
   }
 `;
 
+const httpLink = createHttpLink({ uri: 'http://localhost:4000/graphql' });
+
+const authMiddleware = new ApolloLink((operation, forward) => {
+  // add the authorization to the headers
+  operation.setContext({
+    headers: {
+      authorization: localStorage.getItem('token') || '',
+      'client-name': 'Space Explorer [web]',
+      'client-version': '1.0.0', 
+    },
+    typeDefs,
+    resolvers: {},
+  });
+
+  return forward(operation);
+})
+
 // Set up our apollo-client to point at the server we created
 // this can be local or a remote endpoint
 const client: ApolloClient<NormalizedCacheObject> = new ApolloClient({
   cache,
-  uri: 'http://localhost:4000/graphql',
-  headers: {
-    authorization: localStorage.getItem('token') || '',
-    'client-name': 'Space Explorer [web]',
-    'client-version': '1.0.0',
-  },
-  typeDefs,
-  resolvers: {},
+  link: from([ authMiddleware, cancelRequestLink, httpLink ]),
+  queryDeduplication: false
 });
 
 /**

final/client/src/pages/login.tsx

@@ -1,9 +1,12 @@
 import React from 'react';
 import { gql, useMutation } from '@apollo/client';
 
-import { LoginForm, Loading } from '../components';
+import { LoginForm } from '../components';
 import { isLoggedInVar } from '../cache';
 import * as LoginTypes from './__generated__/login';
+import { v5 as uuidNameSpace, v4 as getNS } from 'uuid';
+
+const RequestNameSpace = getNS();
 
 export const LOGIN_USER = gql`
   mutation Login($email: String!) {
@@ -25,12 +28,10 @@ export default function Login() {
         localStorage.setItem('token', login.token as string);
         localStorage.setItem('userId', login.id as string);
         isLoggedInVar(true);
-      }
+      },
+      context:{ requestTrackerId: uuidNameSpace('LOGIN', RequestNameSpace) }
     }
   );
 
-  if (loading) return <Loading />;
-  if (error) return <p>An error occurred</p>;
-
-  return <LoginForm login={login} />;
+  return <LoginForm error={error} loading={loading} login={login} />;
 }

final/server/package.json

@@ -13,26 +13,26 @@
   "dependencies": {
     "apollo-datasource": "^0.1.3",
     "apollo-datasource-rest": "^0.1.5",
-    "apollo-server": "^2.15.0",
-    "apollo-server-testing": "^2.15.0",
-    "aws-sdk": "^2.585.0",
+    "apollo-server": "^2.17.0",
+    "apollo-server-testing": "^2.17.0",
+    "aws-sdk": "^2.751.0",
     "dotenv": "^6.2.0",
-    "graphql": "^14.6.0",
+    "graphql": "^14.7.0",
     "isemail": "^3.1.3",
-    "mime": "^2.4.4",
+    "mime": "^2.4.6",
     "nodemon": "^1.19.4",
-    "sequelize": "^5.21.2",
-    "sqlite3": "^4.1.1",
-    "uuid": "^3.3.3"
+    "sequelize": "^5.22.3",
+    "sqlite3": "^4.2.0",
+    "uuid": "^3.4.0"
   },
   "devDependencies": {
-    "apollo": "^2.1.8",
-    "apollo-link": "^1.2.3",
-    "apollo-link-http": "^1.5.5",
-    "jest": "^25.0.0",
-    "nock": "^10.0.2",
-    "node-fetch": "^2.2.1",
-    "now": "^12.1.3"
+    "apollo": "^2.30.3",
+    "apollo-link": "^1.2.14",
+    "apollo-link-http": "^1.5.17",
+    "jest": "^25.5.4",
+    "nock": "^10.0.6",
+    "node-fetch": "^2.6.1",
+    "now": "^12.1.14"
   },
   "jest": {
     "testPathIgnorePatterns": [

final/server/src/resolvers.js

@@ -1,5 +1,13 @@
 const { paginateResults } = require('./utils');
 
+
+//Simulate the delay
+function sleeper(ms) {
+  return function(x) {
+    return new Promise(resolve => setTimeout(() => resolve(x), ms));
+  };
+}
+
 module.exports = {
   Query: {
     launches: async (_, { pageSize = 20, after }, { dataSources }) => {
@@ -64,7 +72,9 @@ module.exports = {
       };
     },
     login: async (_, { email }, { dataSources }) => {
-      const user = await dataSources.userAPI.findOrCreateUser({ email });
+      
+      //Intentional delay to show the cancelrequest @ client-side
+      const user = await dataSources.userAPI.findOrCreateUser({ email }).then(sleeper(5000));
       if (user) {
         user.token = new Buffer(email).toString('base64');
         return user;