feat: cache in axios request

Author: fagundesjg

src/api/api.ts

@@ -1,18 +1,32 @@
-import axios, { AxiosRequestHeaders } from 'axios';
+import axios, { AxiosRequestHeaders, InternalAxiosRequestConfig } from 'axios';
+import { getCacheRequestData, handleCacheResponse } from './cache';
 
 const api = axios.create({
   baseURL: import.meta.env.VITE_API_URL ?? 'http://localhost:4000/',
 });
 
-api.interceptors.request.use((config) => {
-  if (!config.headers) config.headers = {} as AxiosRequestHeaders;
+function handleRequestAuthToken(config: InternalAxiosRequestConfig<any>) {
   const token = localStorage.getItem('token');
   if (token) config.headers.Authorization = `Bearer ${token}`;
+}
+
+api.interceptors.request.use((config) => {
+  if (!config.headers) config.headers = {} as AxiosRequestHeaders;
+  handleRequestAuthToken(config);
+  const response = getCacheRequestData(config);
+  if (response) {
+    config.adapter = () => {
+      return new Promise((resolve) => {
+        resolve({ ...response, config });
+      });
+    };
+  }
   return config;
 });
 
 api.interceptors.response.use(
   (config) => {
+    handleCacheResponse(config);
     return config;
   },
   (error) => {

src/api/cache.ts

@@ -0,0 +1,44 @@
+import { AxiosResponse, InternalAxiosRequestConfig } from 'axios';
+
+function getCacheRequestData(config: InternalAxiosRequestConfig<any>) {
+  if (
+    config.method === 'get' &&
+    config.url &&
+    config.headers['x-app-cache'] === 'true'
+  ) {
+    const cache = localStorage.getItem(config.url);
+    if (cache) {
+      const { data, timestamp } = JSON.parse(cache);
+      const ttl = 1000 * 60 * 5; // 5 minutes
+      if (new Date().getTime() - timestamp >= ttl) {
+        console.log(`cache - expirado - ${config.url}`);
+        localStorage.removeItem(config.url);
+      } else {
+        console.log(`cache - ok - ${config.url}`);
+        return data;
+      }
+    }
+  }
+  return null;
+}
+
+function handleCacheResponse(resp: AxiosResponse<any, any>) {
+  if (
+    resp.config.method === 'get' &&
+    resp.config.url &&
+    resp.config.headers['x-app-cache'] === 'true' &&
+    resp.status >= 200 &&
+    resp.status < 300
+  ) {
+    const { data, headers, status, statusText } = resp;
+    localStorage.setItem(
+      resp.config.url,
+      JSON.stringify({
+        data: { data, headers, status, statusText },
+        timestamp: new Date().getTime(),
+      })
+    );
+  }
+}
+
+export { handleCacheResponse, getCacheRequestData };

src/hooks/useFetch/types.ts

@@ -0,0 +1,4 @@
+export interface IUseFetchOptions<T> {
+  cache?: boolean;
+  initialValue?: T;
+}

src/hooks/useFetch/useFetch.tsx

@@ -3,20 +3,24 @@ import { AxiosRequestConfig } from 'axios';
 
 import { api } from '@/api';
 import { IServerResponse } from '@/types';
+import { IUseFetchOptions } from './types';
 
-function useFetch<T = any>(path: string, initialValue?: T) {
+function useFetch<T = any>(path: string, options: IUseFetchOptions<T> = {}) {
+  const { cache, initialValue } = options;
   const [loading, setLoading] = useState<boolean>(true);
   const [data, setData] = useState<T>(initialValue || ({} as T));
 
   const refresh = useCallback(
     (config?: AxiosRequestConfig<any>) => {
+      const headers = config?.headers ?? {};
+      if (cache) headers['x-app-cache'] = 'true';
       setLoading(true);
       api
-        .get<IServerResponse<T>>(path, config)
+        .get<IServerResponse<T>>(path, { ...config, headers })
         .then(({ data }) => setData(data.data))
         .finally(() => setLoading(false));
     },
-    [path]
+    [cache, path]
   );
 
   useEffect(() => {

src/hooks/useSupplies/useSupplies.tsx

@@ -3,7 +3,10 @@ import { useFetch } from '../useFetch';
 import { PaginatedQueryPath } from '../usePaginatedQuery/paths';
 
 const useSupplies = () => {
-  return useFetch<ISupply[]>(PaginatedQueryPath.Supplies, []);
+  return useFetch<ISupply[]>(PaginatedQueryPath.Supplies, {
+    initialValue: [],
+    cache: true,
+  });
 };
 
 export { useSupplies };

src/hooks/useSupplyCategories/useSupplyCategories.tsx

@@ -3,7 +3,10 @@ import { PaginatedQueryPath } from '../usePaginatedQuery/paths';
 import { ISupplyCategory } from './types';
 
 const useSupplyCategories = () => {
-  return useFetch<ISupplyCategory[]>(PaginatedQueryPath.SupplyCategories, []);
+  return useFetch<ISupplyCategory[]>(PaginatedQueryPath.SupplyCategories, {
+    initialValue: [],
+    cache: true,
+  });
 };
 
 export { useSupplyCategories };