fix: stop flickering due to late initiated token

packages/web/src/components/ApolloProvider/index.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ApolloProvider as BaseApolloProvider } from '@apollo/client';
 import { useSnackbar } from 'notistack';
 
-import client, { setLink } from 'graphql/client';
+import { mutateAndGetClient } from 'graphql/client';
 import useAuthentication from 'hooks/useAuthentication';
 
 type ApolloProviderProps = {
@@ -17,9 +17,12 @@ const ApolloProvider = (props: ApolloProviderProps): React.ReactElement => {
     enqueueSnackbar(message, { variant: 'error' });
   }, [enqueueSnackbar]);
 
-  React.useEffect(() => {
-    setLink({ onError, token: authentication.token })
-  },  [onError, authentication]);
+  const client = React.useMemo(() => {
+    return mutateAndGetClient({
+      onError,
+      token: authentication.token,
+    });
+  }, [onError, authentication]);
 
   return (
     <BaseApolloProvider client={client} {...props} />

packages/web/src/components/LoginForm/index.tsx

@@ -30,6 +30,7 @@ function renderFields(props: { loading: boolean }) {
           required
           fullWidth
           margin="dense"
+          autoComplete="username"
         />
 
         <TextField

packages/web/src/graphql/client.ts

@@ -13,7 +13,7 @@ const client = new ApolloClient({
   link: createLink({ uri: appConfig.graphqlUrl })
 });
 
-export function setLink(options: CreateClientOptions): typeof client {
+export function mutateAndGetClient(options: CreateClientOptions): typeof client {
   const { onError, token } = options;
   const link = createLink({ uri: appConfig.graphqlUrl, token, onError });
 

packages/web/src/graphql/link.ts

@@ -2,6 +2,7 @@ import { HttpLink, from } from '@apollo/client';
 import type { ApolloLink } from '@apollo/client';
 import { onError } from '@apollo/client/link/error';
 
+import { setItem } from 'helpers/storage';
 import * as URLS from 'config/urls';
 
 type CreateLinkOptions = {
@@ -29,6 +30,7 @@ const createErrorLink = (callback: CreateLinkOptions['onError']): ApolloLink =>
       );
 
       if (message === NOT_AUTHORISED) {
+        setItem('token', '');
         window.location.href = URLS.LOGIN;
       }
     });