Migrate to Vue 3 and Vite

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/apollo/absinthe-socket-link.ts

@@ -0,0 +1,25 @@
+import { Socket as PhoenixSocket } from "phoenix";
+import { create } from "@absinthe/socket";
+import { createAbsintheSocketLink } from "@absinthe/socket-apollo-link";
+import { AUTH_ACCESS_TOKEN } from "@/constants";
+import { GRAPHQL_API_ENDPOINT } from "@/api/_entrypoint";
+
+const httpServer = GRAPHQL_API_ENDPOINT || "http://localhost:4000";
+
+const webSocketPrefix = import.meta.env.PROD ? "wss" : "ws";
+const wsEndpoint = `${webSocketPrefix}${httpServer.substring(
+  httpServer.indexOf(":")
+)}/graphql_socket`;
+
+const phoenixSocket = new PhoenixSocket(wsEndpoint, {
+  params: () => {
+    const token = localStorage.getItem(AUTH_ACCESS_TOKEN);
+    if (token) {
+      return { token };
+    }
+    return {};
+  },
+});
+
+const absintheSocket = create(phoenixSocket);
+export default createAbsintheSocketLink(absintheSocket);

js/src/apollo/absinthe-upload-socket-link.ts

@@ -0,0 +1,20 @@
+import fetch from "unfetch";
+import { createLink } from "apollo-absinthe-upload-link";
+import { GRAPHQL_API_ENDPOINT, GRAPHQL_API_FULL_PATH } from "@/api/_entrypoint";
+
+// Endpoints
+const httpServer = GRAPHQL_API_ENDPOINT || "http://localhost:4000";
+const httpEndpoint = GRAPHQL_API_FULL_PATH || `${httpServer}/api`;
+
+const customFetch = async (uri: string, options: any) => {
+  const response = await fetch(uri, options);
+  if (response.status >= 400) {
+    return Promise.reject(response.status);
+  }
+  return response;
+};
+
+export const uploadLink = createLink({
+  uri: httpEndpoint,
+  fetch: customFetch,
+});

js/src/apollo/auth.ts

@@ -0,0 +1,23 @@
+import { AUTH_ACCESS_TOKEN } from "@/constants";
+import { ApolloLink } from "@apollo/client/core";
+
+export function generateTokenHeader() {
+  const token = localStorage.getItem(AUTH_ACCESS_TOKEN);
+
+  return token ? `Bearer ${token}` : null;
+}
+
+const authMiddleware = new ApolloLink((operation, forward) => {
+  // add the authorization to the headers
+  operation.setContext({
+    headers: {
+      authorization: generateTokenHeader(),
+    },
+  });
+
+  if (forward) return forward(operation);
+
+  return null;
+});
+
+export { authMiddleware };

js/src/apollo/error-link.ts

@@ -0,0 +1,101 @@
+import { logout } from "@/utils/auth";
+import { onError } from "@apollo/client/link/error";
+import { fromPromise } from "@apollo/client/core";
+import { refreshAccessToken } from "./utils";
+import { GraphQLError } from "graphql";
+import { generateTokenHeader } from "./auth";
+
+let isRefreshing = false;
+let pendingRequests: any[] = [];
+
+const resolvePendingRequests = () => {
+  pendingRequests.map((callback) => callback());
+  pendingRequests = [];
+};
+
+const isAuthError = (graphQLError: GraphQLError | undefined) => {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  return graphQLError && [403, 401].includes(graphQLError.status_code);
+};
+
+const errorLink = onError(
+  ({ graphQLErrors, networkError, forward, operation }) => {
+    console.debug("We have an apollo error", [graphQLErrors, networkError]);
+    if (
+      graphQLErrors?.some((graphQLError) => isAuthError(graphQLError)) ||
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      networkError === 401
+    ) {
+      console.debug("It's a authorization error (statusCode 401)");
+      let forwardOperation;
+
+      if (!isRefreshing) {
+        console.debug("Setting isRefreshing to true");
+        isRefreshing = true;
+
+        forwardOperation = fromPromise(
+          refreshAccessToken()
+            .then((res) => {
+              if (res !== true) {
+                // failed to refresh the token
+                throw "Failed to refresh the token";
+              }
+              resolvePendingRequests();
+
+              const context = operation.getContext();
+              const oldHeaders = context.headers;
+
+              operation.setContext({
+                headers: {
+                  ...oldHeaders,
+                  authorization: generateTokenHeader(),
+                },
+              });
+              return true;
+            })
+            .catch((e) => {
+              console.debug("Something failed, let's logout", e);
+              pendingRequests = [];
+              // don't perform a logout since we don't have any working access/refresh tokens
+              logout(false);
+              return;
+            })
+            .finally(() => {
+              isRefreshing = false;
+            })
+        ).filter((value) => Boolean(value));
+      } else {
+        forwardOperation = fromPromise(
+          new Promise((resolve) => {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            pendingRequests.push(() => resolve());
+          })
+        );
+      }
+
+      return forwardOperation.flatMap(() => forward(operation));
+    }
+
+    if (graphQLErrors) {
+      graphQLErrors.map(
+        (graphQLError: GraphQLError & { status_code?: number }) => {
+          if (graphQLError?.status_code !== 401) {
+            console.log(
+              `[GraphQL error]: Message: ${graphQLError.message}, Location: ${graphQLError.locations}, Path: ${graphQLError.path}`
+            );
+          }
+        }
+      );
+    }
+
+    if (networkError) {
+      console.error(`[Network error]: ${networkError}`);
+      console.debug(JSON.stringify(networkError));
+    }
+  }
+);
+
+export default errorLink;

js/src/apollo/link.ts

@@ -0,0 +1,27 @@
+import { split } from "@apollo/client/core";
+import { RetryLink } from "@apollo/client/link/retry";
+import { getMainDefinition } from "@apollo/client/utilities";
+import absintheSocketLink from "./absinthe-socket-link";
+import { authMiddleware } from "./auth";
+import errorLink from "./error-link";
+import { uploadLink } from "./absinthe-upload-socket-link";
+
+// const link = split(
+//   // split based on operation type
+//   ({ query }) => {
+//     const definition = getMainDefinition(query);
+//     return (
+//       definition.kind === "OperationDefinition" &&
+//       definition.operation === "subscription"
+//     );
+//   },
+//   absintheSocketLink,
+//   uploadLink
+// );
+
+const retryLink = new RetryLink();
+
+export const fullLink = authMiddleware
+  .concat(retryLink)
+  .concat(errorLink)
+  .concat(uploadLink);

js/src/apollo/memory.ts

@@ -0,0 +1,14 @@
+import { defaultDataIdFromObject, InMemoryCache } from "@apollo/client/core";
+import { possibleTypes, typePolicies } from "./utils";
+
+export const cache = new InMemoryCache({
+  addTypename: true,
+  typePolicies,
+  possibleTypes,
+  dataIdFromObject: (object: any) => {
+    if (object.__typename === "Address") {
+      return object.origin_id;
+    }
+    return defaultDataIdFromObject(object);
+  },
+});

js/src/apollo/user.ts

@@ -1,4 +1,5 @@
 import { CURRENT_ACTOR_CLIENT } from "@/graphql/actor";
+import { CURRENT_USER_LOCATION_CLIENT } from "@/graphql/location";
 import { CURRENT_USER_CLIENT } from "@/graphql/user";
 import { ICurrentUserRole } from "@/types/enums";
 import { ApolloCache, NormalizedCacheObject } from "@apollo/client/cache";
@@ -33,6 +34,20 @@ export default function buildCurrentUserResolver(
     },
   });
 
+  cache.writeQuery({
+    query: CURRENT_USER_LOCATION_CLIENT,
+    data: {
+      currentUserLocation: {
+        lat: null,
+        lon: null,
+        accuracy: null,
+        isIPLocation: null,
+        name: null,
+        picture: null,
+      },
+    },
+  });
+
   return {
     Mutation: {
       updateCurrentUser: (
@@ -55,6 +70,8 @@ export default function buildCurrentUserResolver(
           },
         };
 
+        console.debug("updating current user", data);
+
         localCache.writeQuery({ data, query: CURRENT_USER_CLIENT });
       },
       updateCurrentActor: (
@@ -82,8 +99,45 @@ export default function buildCurrentUserResolver(
           },
         };
 
+        console.debug("updating current actor", data);
+
         localCache.writeQuery({ data, query: CURRENT_ACTOR_CLIENT });
       },
+      updateCurrentUserLocation: (
+        _: any,
+        {
+          lat,
+          lon,
+          accuracy,
+          isIPLocation,
+          name,
+          picture,
+        }: {
+          lat: number;
+          lon: number;
+          accuracy: number;
+          isIPLocation: boolean;
+          name: string;
+          picture: any;
+        },
+        { cache: localCache }: { cache: ApolloCache<NormalizedCacheObject> }
+      ) => {
+        const data = {
+          currentUserLocation: {
+            lat,
+            lon,
+            accuracy,
+            isIPLocation,
+            name,
+            picture,
+            __typename: "CurrentUserLocation",
+          },
+        };
+
+        console.debug("updating current user location", data);
+
+        localCache.writeQuery({ data, query: CURRENT_USER_LOCATION_CLIENT });
+      },
     },
   };
 }

js/src/apollo/utils.ts

@@ -4,19 +4,16 @@ import { IFollower } from "@/types/actor/follower.model";
 import { IParticipant } from "@/types/participant.model";
 import { Paginate } from "@/types/paginate";
 import { saveTokenData } from "@/utils/auth";
-import {
-  ApolloClient,
-  FieldPolicy,
-  NormalizedCacheObject,
-  Reference,
-  TypePolicies,
-} from "@apollo/client/core";
+import { FieldPolicy, Reference, TypePolicies } from "@apollo/client/core";
 import introspectionQueryResultData from "../../fragmentTypes.json";
 import { IMember } from "@/types/actor/member.model";
 import { IComment } from "@/types/comment.model";
 import { IEvent } from "@/types/event.model";
 import { IActivity } from "@/types/activity.model";
 import uniqBy from "lodash/uniqBy";
+import { provideApolloClient, useMutation } from "@vue/apollo-composable";
+import { apolloClient } from "@/vue-apollo";
+import { IToken } from "@/types/login.model";
 
 type possibleTypes = { name: string };
 type schemaType = {
@@ -73,6 +70,9 @@ export const typePolicies: TypePolicies = {
   Instance: {
     keyFields: ["domain"],
   },
+  Config: {
+    merge: true,
+  },
   RootQueryType: {
     fields: {
       relayFollowers: paginatedLimitPagination<IFollower>(),
@@ -99,9 +99,7 @@ export const typePolicies: TypePolicies = {
   },
 };
 
-export async function refreshAccessToken(
-  apolloClient: ApolloClient<NormalizedCacheObject>
-): Promise<boolean> {
+export async function refreshAccessToken(): Promise<boolean> {
   // Remove invalid access token, so the next request is not authenticated
   localStorage.removeItem(AUTH_ACCESS_TOKEN);
 
@@ -114,21 +112,28 @@ export async function refreshAccessToken(
 
   console.log("Refreshing access token.");
 
-  try {
-    const res = await apolloClient.mutate({
-      mutation: REFRESH_TOKEN,
-      variables: {
-        refreshToken,
-      },
+  return new Promise((resolve, reject) => {
+    const { mutate, onDone, onError } = provideApolloClient(apolloClient)(() =>
+      useMutation<{ refreshToken: IToken }>(REFRESH_TOKEN)
+    );
+
+    mutate({
+      refreshToken,
     });
 
-    saveTokenData(res.data.refreshToken);
+    onDone(({ data }) => {
+      if (data?.refreshToken) {
+        saveTokenData(data?.refreshToken);
+        resolve(true);
+      }
+      reject(false);
+    });
 
-    return true;
-  } catch (err) {
-    console.debug("Failed to refresh token");
-    return false;
-  }
+    onError((err) => {
+      console.debug("Failed to refresh token");
+      reject(false);
+    });
+  });
 }
 
 type KeyArgs = FieldPolicy<any>["keyArgs"];