fix: User could get logged out randomly if they temporarily lost conn…

…ection (#782)
pluralsh · Mar 15, 2024 · 8189e19 · 8189e19
1 parent 047909b
commit 8189e19
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 48 deletions.
diff --git a/assets/codegen.yml b/assets/codegen.yml
@@ -12,6 +12,12 @@ generates:
           content:
             - '/* eslint-disable */'
             - '/* prettier-ignore */'
+  src/generated/fragments.json:
+    schema: '../schema/schema.graphql'
+    plugins:
+      - 'fragment-matcher'
+    config:
+      - apolloClientVersion: 3
   src/generated/graphql-plural.ts:
     schema: 'https://raw.githubusercontent.com/pluralsh/plural/master/schema/schema.graphql'
     documents: './src/graph-plural/**/*.graphql'
@@ -30,6 +36,3 @@ config:
     UploadOrUrl: string
     DateTime: string
     Yaml: unknown
-hooks:
-  afterAllFileWrite:
-    - eslint --fix
diff --git a/assets/package.json b/assets/package.json
@@ -68,7 +68,7 @@
     "honorable-theme-default": "1.0.0-beta.5",
     "humanize-duration": "3.31.0",
     "immer": "10.0.3",
-    "js-cookie": "^3.0.5",
+    "js-cookie": "3.0.5",
     "js-file-download": "0.4.12",
     "js-yaml": "4.1.0",
     "jsonpath": "1.1.1",
@@ -131,6 +131,7 @@
     "@cypress/webpack-preprocessor": "5.17.1",
     "@graphql-codegen/add": "5.0.0",
     "@graphql-codegen/cli": "5.0.0",
+    "@graphql-codegen/fragment-matcher": "5.0.2",
     "@graphql-codegen/introspection": "4.0.0",
     "@graphql-codegen/typescript": "4.0.1",
     "@graphql-codegen/typescript-operations": "4.0.1",

diff --git a/assets/src/generated/fragments.json b/assets/src/generated/fragments.json
@@ -1,18 +1,8 @@
 {
-  "__schema": {
-    "types": [
-      {
-        "kind": "UNION",
-        "name": "KubernetesData",
-        "possibleTypes": [
-          {
-            "name": "Deployment"
-          },
-          {
-            "name": "StatefulSet"
-          }
-        ]
-      }
+  "possibleTypes": {
+    "KubernetesData": [
+      "Deployment",
+      "StatefulSet"
     ]
   }
 }
diff --git a/assets/src/helpers/auth.js → assets/src/helpers/auth.ts b/assets/src/helpers/auth.js → assets/src/helpers/auth.ts
@@ -11,11 +11,11 @@ export function fetchToken() {
   return localStorage.getItem(AUTH_TOKEN)
 }
 
-export function setToken(token) {
+export function setToken(token: string | null | undefined) {
   localStorage.setItem(AUTH_TOKEN, token || '')
 }
 
-export function setRefreshToken(token) {
+export function setRefreshToken(token: string | null | undefined) {
   Cookies.set(REFRESH_TOKEN, token || '', {
     path: '/',
     secure: true,

diff --git a/assets/src/helpers/client.js → assets/src/helpers/client.ts b/assets/src/helpers/client.js → assets/src/helpers/client.ts
@@ -1,5 +1,4 @@
 import { ApolloClient, InMemoryCache } from '@apollo/client'
-import { IntrospectionFragmentMatcher } from 'apollo-cache-inmemory'
 import { setContext } from 'apollo-link-context'
 import { createLink } from 'apollo-absinthe-upload-link'
 import { onError } from 'apollo-link-error'
@@ -10,17 +9,13 @@ import { RetryLink } from 'apollo-link-retry'
 import { hasSubscription } from '@jumpn/utils-graphql'
 import { split } from 'apollo-link'
 
-import introspection from '../generated/fragments.json'
+import fragments from '../generated/fragments.json'
 
-import { onErrorHandler, onNetworkError } from './refreshToken'
+import { onErrorHandler } from './refreshToken'
 
 import customFetch from './uploadLink'
 import { fetchToken } from './auth'
 
-const fragmentMatcher = new IntrospectionFragmentMatcher({
-  introspectionQueryResultData: introspection,
-})
-
 const GQL_URL = '/gql'
 const WS_URI = '/socket'
 
@@ -29,7 +24,7 @@ export const authlessClient = new ApolloClient({
   cache: new InMemoryCache(),
 })
 
-export function buildClient(gqlUrl, wsUrl, onNetworkError, fetchToken) {
+export function buildClient(gqlUrl, wsUrl, fetchToken) {
   const httpLink = createLink({ uri: gqlUrl, fetch: customFetch })
 
   const authLink = setContext((_, { headers }) => {
@@ -69,9 +64,10 @@ export function buildClient(gqlUrl, wsUrl, onNetworkError, fetchToken) {
   )
 
   const client = new ApolloClient({
+    // @ts-ignore
     link: splitLink,
     cache: new InMemoryCache({
-      fragmentMatcher,
+      possibleTypes: fragments.possibleTypes,
       typePolicies: {
         Command: {
           fields: {
@@ -91,11 +87,6 @@ export function buildClient(gqlUrl, wsUrl, onNetworkError, fetchToken) {
   return { client, socket }
 }
 
-const { client, socket } = buildClient(
-  GQL_URL,
-  WS_URI,
-  onNetworkError,
-  fetchToken
-)
+const { client, socket } = buildClient(GQL_URL, WS_URI, fetchToken)
 
 export { client, socket }
diff --git a/assets/src/helpers/refreshToken.ts b/assets/src/helpers/refreshToken.ts
@@ -1,5 +1,6 @@
 import { RefreshDocument, RefreshQuery } from 'generated/graphql'
 import { FetchResult } from '@apollo/client'
+import { NetworkError } from '@apollo/client/errors'
 import { Observable } from 'apollo-link'
 import { ErrorHandler } from 'apollo-link-error'
 
@@ -19,7 +20,7 @@ export const getRefreshedToken = async () => {
     fetchPolicy: 'no-cache',
   })
 
-  return refreshResolverResponse.data.refresh?.jwt
+  return refreshResolverResponse?.data?.refresh?.jwt
 }
 
 export const onErrorHandler: ErrorHandler = ({
@@ -49,7 +50,7 @@ export const onErrorHandler: ErrorHandler = ({
           const jwt = await getRefreshedToken()
 
           if (!jwt) {
-            onNetworkError()
+            logout()
           } else {
             setToken(jwt)
           }
@@ -70,18 +71,25 @@ export const onErrorHandler: ErrorHandler = ({
           forward(operation).subscribe(subscriber)
         } catch (err) {
           observer.error(err)
-          onNetworkError()
+          // Prevent logout if refresh endpoint is just unreachable
+          if (
+            (err as Nullable<{ networkError?: Nullable<NetworkError> }>)
+              ?.networkError?.message === 'Failed to fetch'
+          ) {
+            return
+          }
+          logout()
         }
       })()
     })
   }
 
   if (is401) {
-    onNetworkError()
+    logout()
   }
 }
 
-export function onNetworkError() {
+export function logout() {
   wipeToken()
   wipeRefreshToken()
   window.location = '/login' as any as Location

diff --git a/assets/yarn.lock b/assets/yarn.lock
@@ -2778,6 +2778,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@graphql-codegen/fragment-matcher@npm:5.0.2":
+  version: 5.0.2
+  resolution: "@graphql-codegen/fragment-matcher@npm:5.0.2"
+  dependencies:
+    "@graphql-codegen/plugin-helpers": ^5.0.3
+    tslib: ~2.6.0
+  peerDependencies:
+    graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
+  checksum: 136a77fe7fdb9eddcee4dff5fb3ac0f804bdf717b3de3596f37d74c4a14b8b9af02e164bcd3bf4624585a1916845c0efe561ef191143a513eb7999fe8fb9a89d
+  languageName: node
+  linkType: hard
+
 "@graphql-codegen/introspection@npm:4.0.0":
   version: 4.0.0
   resolution: "@graphql-codegen/introspection@npm:4.0.0"
@@ -2853,6 +2865,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@graphql-codegen/plugin-helpers@npm:^5.0.3":
+  version: 5.0.3
+  resolution: "@graphql-codegen/plugin-helpers@npm:5.0.3"
+  dependencies:
+    "@graphql-tools/utils": ^10.0.0
+    change-case-all: 1.0.15
+    common-tags: 1.8.2
+    import-from: 4.0.0
+    lodash: ~4.17.0
+    tslib: ~2.6.0
+  peerDependencies:
+    graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
+  checksum: 7116745edd88cabc61aa192c2a3632844950f00e33040f68f0ccc41bb2d6bf3a14fbeaa67d6d5ea01193ef1e709a9b5bd09860c3b3e262dacea0f1127ee61789
+  languageName: node
+  linkType: hard
+
 "@graphql-codegen/schema-ast@npm:^4.0.0":
   version: 4.0.0
   resolution: "@graphql-codegen/schema-ast@npm:4.0.0"
@@ -9120,6 +9148,7 @@ __metadata:
     "@emotion/styled": 11.11.0
     "@graphql-codegen/add": 5.0.0
     "@graphql-codegen/cli": 5.0.0
+    "@graphql-codegen/fragment-matcher": 5.0.2
     "@graphql-codegen/introspection": 4.0.0
     "@graphql-codegen/named-operations-object": 3.0.0
     "@graphql-codegen/typescript": 4.0.1
@@ -9185,7 +9214,7 @@ __metadata:
     humanize-duration: 3.31.0
     husky: 8.0.3
     immer: 10.0.3
-    js-cookie: ^3.0.5
+    js-cookie: 3.0.5
     js-file-download: 0.4.12
     js-yaml: 4.1.0
     jsdom: 22.1.0
@@ -13288,20 +13317,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"js-cookie@npm:3.0.5":
+  version: 3.0.5
+  resolution: "js-cookie@npm:3.0.5"
+  checksum: 2dbd2809c6180fbcf060c6957cb82dbb47edae0ead6bd71cbeedf448aa6b6923115003b995f7d3e3077bfe2cb76295ea6b584eb7196cca8ba0a09f389f64967a
+  languageName: node
+  linkType: hard
+
 "js-cookie@npm:^2.2.1":
   version: 2.2.1
   resolution: "js-cookie@npm:2.2.1"
   checksum: 9b1fb980a1c5e624fd4b28ea4867bb30c71e04c4484bb3a42766344c533faa684de9498e443425479ec68609e96e27b60614bfe354877c449c631529b6d932f2
   languageName: node
   linkType: hard
 
-"js-cookie@npm:^3.0.5":
-  version: 3.0.5
-  resolution: "js-cookie@npm:3.0.5"
-  checksum: 2dbd2809c6180fbcf060c6957cb82dbb47edae0ead6bd71cbeedf448aa6b6923115003b995f7d3e3077bfe2cb76295ea6b584eb7196cca8ba0a09f389f64967a
-  languageName: node
-  linkType: hard
-
 "js-file-download@npm:0.4.12":
   version: 0.4.12
   resolution: "js-file-download@npm:0.4.12"