fix: Improve performance of most hit APIs in widget (#11089)

- Cache campaigns for better performance
- Fix N+1 queries in inbox members
- Remove unused related articles

app/javascript/widget/store/modules/campaign.js

@@ -7,6 +7,7 @@ import {
 const state = {
   records: [],
   uiFlags: {
+    hasFetched: false,
     isError: false,
   },
   activeCampaign: {},
@@ -30,6 +31,7 @@ const resetCampaignTimers = (
 
 export const getters = {
   getCampaigns: $state => $state.records,
+  getUIFlags: $state => $state.uiFlags,
   getActiveCampaign: $state => $state.activeCampaign,
 };
 
@@ -53,15 +55,21 @@ export const actions = {
     }
   },
   initCampaigns: async (
-    { getters: { getCampaigns: campaigns }, dispatch },
+    { getters: { getCampaigns: campaigns, getUIFlags: uiFlags }, dispatch },
     { currentURL, websiteToken, isInBusinessHours }
   ) => {
     if (!campaigns.length) {
-      dispatch('fetchCampaigns', {
-        websiteToken,
-        currentURL,
-        isInBusinessHours,
-      });
+      // This check is added to ensure that the campaigns are fetched once
+      // On high traffic sites, if the campaigns are empty, the API is called
+      // every time the user changes the URL (in case of the SPA)
+      // So, we need to ensure that the campaigns are fetched only once
+      if (!uiFlags.hasFetched) {
+        dispatch('fetchCampaigns', {
+          websiteToken,
+          currentURL,
+          isInBusinessHours,
+        });
+      }
     } else {
       resetCampaignTimers(
         campaigns,
@@ -127,6 +135,7 @@ export const actions = {
 export const mutations = {
   setCampaigns($state, data) {
     $state.records = data;
+    $state.uiFlags.hasFetched = true;
   },
   setActiveCampaign($state, data) {
     $state.activeCampaign = data;