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;