refactor(v4.0.0-alpha): beginning of a new era

apps/client/src/libs/axios.ts

@@ -0,0 +1,53 @@
+import { deepSearchAndParseDates } from "@reactive-resume/utils";
+import _axios from "axios";
+import createAuthRefreshInterceptor from "axios-auth-refresh";
+import { redirect } from "react-router-dom";
+
+import { USER_KEY } from "../constants/query-keys";
+import { refresh } from "../services/auth/refresh";
+import { queryClient } from "./query-client";
+
+export type ServerError = {
+  statusCode: number;
+  message: string;
+  error: string;
+};
+
+export const axios = _axios.create({ baseURL: "/api", withCredentials: true });
+
+// Intercept responses to transform ISO dates to JS date objects
+axios.interceptors.response.use((response) => {
+  const transformedResponse = deepSearchAndParseDates(response.data, ["createdAt", "updatedAt"]);
+  return { ...response, data: transformedResponse };
+});
+
+// Create another instance to handle failed refresh tokens
+// Reference: https://github.com/Flyrell/axios-auth-refresh/issues/191
+const axiosForRefresh = _axios.create({ baseURL: "/api", withCredentials: true });
+
+// Interceptor to handle expired access token errors
+const handleAuthError = async () => {
+  try {
+    await refresh(axiosForRefresh);
+
+    return Promise.resolve();
+  } catch (error) {
+    return Promise.reject(error);
+  }
+};
+
+// Interceptor to handle expired refresh token errors
+const handleRefreshError = async () => {
+  try {
+    queryClient.invalidateQueries({ queryKey: USER_KEY });
+    redirect("/auth/login");
+
+    return Promise.resolve();
+  } catch (error) {
+    return Promise.reject(error);
+  }
+};
+
+// Intercept responses to check for 401 and 403 errors, refresh token and retry the request
+createAuthRefreshInterceptor(axios, handleAuthError, { statusCodes: [401, 403] });
+createAuthRefreshInterceptor(axiosForRefresh, handleRefreshError);

apps/client/src/libs/dayjs.ts

@@ -0,0 +1,6 @@
+import dayjs from "dayjs";
+import localizedFormat from "dayjs/plugin/localizedFormat";
+import relativeTime from "dayjs/plugin/relativeTime";
+
+dayjs.extend(localizedFormat);
+dayjs.extend(relativeTime);

apps/client/src/libs/query-client.ts

@@ -0,0 +1,16 @@
+import { QueryClient } from "@tanstack/react-query";
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    mutations: {
+      retry: false,
+    },
+    queries: {
+      retry: false,
+      refetchOnMount: false,
+      refetchOnReconnect: false,
+      refetchOnWindowFocus: false,
+      staleTime: 1000 * 60, // 1 minute
+    },
+  },
+});