Add cache layer to axios (#1031)

Co-authored-by: Eric Boucher <[email protected]>
aqualinkorg · Sep 27, 2024 · b9fa835 · b9fa835
1 parent e12f9b3
commit b9fa835
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 5 deletions.
diff --git a/packages/website/package.json b/packages/website/package.json
@@ -27,6 +27,7 @@
     "@testing-library/user-event": "^7.1.2",
     "@types/leaflet.locatecontrol": "^0.74.4",
     "axios": "^1.7.4",
+    "axios-cache-interceptor": "^1.6.0",
     "chart.js": "^4.4.3",
     "chartjs-adapter-date-fns": "^3.0.0",
     "chartjs-plugin-annotation": "^3.0.0",

diff --git a/packages/website/src/helpers/requests.ts b/packages/website/src/helpers/requests.ts
@@ -1,3 +1,4 @@
+import { setupCache } from 'axios-cache-interceptor';
 import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
 import { isUndefined, omitBy } from 'lodash';
 
@@ -9,11 +10,14 @@ const instance = axios.create({
   },
 });
 
+const cachedInstance = setupCache(instance);
+
 const agent = (contentType?: string) => {
   // eslint-disable-next-line fp/no-mutation
-  instance.defaults.headers['Content-Type'] = contentType || 'application/json';
+  cachedInstance.defaults.headers['Content-Type'] =
+    contentType || 'application/json';
 
-  return instance;
+  return cachedInstance;
 };
 
 function send<T>(request: Request): Promise<AxiosResponse<T>> {
@@ -51,7 +55,7 @@ interface Request {
 }
 
 export default {
-  axiosInstance: instance,
+  axiosInstance: cachedInstance,
   agent,
   send,
   generateUrlQueryParams,

diff --git a/packages/website/src/index.tsx b/packages/website/src/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { AxiosError, AxiosResponse } from 'axios';
+import { AxiosError } from 'axios';
+import { CacheAxiosResponse } from 'axios-cache-interceptor';
 import './index.css';
 import 'leaflet/dist/leaflet.css';
 import './assets/css/bootstrap.css';
@@ -21,7 +22,7 @@ if (app) {
   onAuthStateChanged(auth, (user) => {
     if (user) {
       requestsConfig.agent().interceptors.response.use(
-        (response: AxiosResponse) => Promise.resolve(response),
+        (response: CacheAxiosResponse) => Promise.resolve(response),
         async (error: AxiosError) => {
           const { config, status } = error?.response || {};
           const oldToken = store.getState().user.userInfo?.token;

diff --git a/packages/website/src/setupTests.ts b/packages/website/src/setupTests.ts
@@ -47,6 +47,13 @@ jest.mock('chartjs-adapter-date-fns', () => ({
   default: 'mock-chartjs-adapter-date-fns',
 }));
 
+jest.mock('axios-cache-interceptor', () => ({
+  __esModule: true,
+  ...jest.requireActual('axios-cache-interceptor'),
+  // do not intercept requests with cache in tests
+  setupCache: jest.fn((instance) => instance),
+}));
+
 function stubMuiComponent(componentName: string, namedExports: any = {}) {
   jest.doMock(`@material-ui/core/${componentName}/${componentName}`, () => ({
     __esModule: true,

diff --git a/yarn.lock b/yarn.lock
@@ -6621,6 +6621,15 @@ axe-core@^4.6.2:
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.7.1.tgz#04392c9ccb3d7d7c5d2f8684f148d56d3442f33d"
   integrity sha512-sCXXUhA+cljomZ3ZAwb8i1p3oOlkABzPy08ZDAoGcYuvtBPlQ1Ytde129ArXyHWDhfeewq7rlx9F+cUx2SSlkg==
 
+axios-cache-interceptor@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/axios-cache-interceptor/-/axios-cache-interceptor-1.6.0.tgz#6be79520138dce08a4a301a9163eb8f875f78d25"
+  integrity sha512-xuo4mZckPQmNV50bJpsMmGfpFV8SXsUWWUVKf1DXQy7t9p+6Pan9zrD3icAlCIdoYFw/ZJFKV6nUVqy8j0XCLQ==
+  dependencies:
+    cache-parser "1.2.5"
+    fast-defer "1.1.8"
+    object-code "1.3.3"
+
 axios-retry@^3.8.1:
   version "3.8.1"
   resolved "https://registry.yarnpkg.com/axios-retry/-/axios-retry-3.8.1.tgz#4bb53f87ea537bce904c477e5c2808571066acbb"
@@ -7180,6 +7189,11 @@ cacache@^17.0.0, cacache@^17.0.4:
     tar "^6.1.11"
     unique-filename "^3.0.0"
 
+[email protected]:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/cache-parser/-/cache-parser-1.2.5.tgz#f19102a788b03055389730eb0493e463e1b379ac"
+  integrity sha512-Md/4VhAHByQ9frQ15WD6LrMNiVw9AEl/J7vWIXw+sxT6fSOpbtt6LHTp76vy8+bOESPBO94117Hm2bIjlI7XjA==
+
 call-bind@^1.0.0, call-bind@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
@@ -10139,6 +10153,11 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
+[email protected]:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/fast-defer/-/fast-defer-1.1.8.tgz#940ef9597b2ea51c4cd08e99d0f2a8978fa49ba2"
+  integrity sha512-lEJeOH5VL5R09j6AA0D4Uvq7AgsHw0dAImQQ+F3iSyHZuAxyQfWobsagGpTcOPvJr3urmKRHrs+Gs9hV+/Qm/Q==
+
 fast-diff@^1.1.2:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.3.0.tgz#ece407fa550a64d638536cd727e129c61616e0f0"
@@ -15507,6 +15526,11 @@ object-assign@*, object-assign@^4, object-assign@^4.0.1, object-assign@^4.1.0, o
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
 
+[email protected]:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/object-code/-/object-code-1.3.3.tgz#cf21843ddfecce3ec73fd141f66a7f16ba0cb93e"
+  integrity sha512-/Ds4Xd5xzrtUOJ+xJQ57iAy0BZsZltOHssnDgcZ8DOhgh41q1YJCnTPnWdWSLkNGNnxYzhYChjc5dgC9mEERCA==
+
 object-hash@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-3.0.0.tgz#73f97f753e7baffc0e2cc9d6e079079744ac82e9"