Optimise to reduce number of API requests

Minor, slightly hacky, change that signficiantly reduces the number of network requests made by avoiding unintended duplicate requests for the same data. This "should" be resolved by refactoring the component logic and cleaning up the code, but that's a lot of work for little to no performance gain, and would probably introduce new bugs (until they were squashed) and there are more intersting features to work on.
iaincollins · Oct 27, 2024 · e37f4fd · e37f4fd
1 parent f360706
commit e37f4fd
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 8 deletions.
diff --git a/components/header.js b/components/header.js
@@ -88,7 +88,7 @@ export default () => {
             {newsTicker.map(item =>
               <span
                 key={`ticker_${i}_${item.marketId}_${item.commodityName}`} className='news-ticker__ticker-item'
-                onClick={() => router.push(`/commodity/${item.commodityName}/${item.demandBracket === 3 ? 'importers' : 'exporters'}?maxDaysAgo=${COMMODITY_FILTER_MAX_DAYS_AGO_DEFAULT}&fleetCarriers=${COMMODITY_FILTER_FLEET_CARRIER_DEFAULT}&minVolume=${COMMODITY_FILTER_MIN_VOLUME_DEFAULT}&location=${item.systemName}&maxDistance=1`)}
+                onClick={() => router.push(`/commodity/${item.commodityName}/${item.demandBracket === 3 ? 'importers' : 'exporters'}?maxDaysAgo=${COMMODITY_FILTER_MAX_DAYS_AGO_DEFAULT}&minVolume=${COMMODITY_FILTER_MIN_VOLUME_DEFAULT}&fleetCarriers=${COMMODITY_FILTER_FLEET_CARRIER_DEFAULT}&location=${item.systemName}&maxDistance=1`)}
               >
                 <span className='muted'>{item.stationName}, {item.systemName}</span>
                 <br />

diff --git a/components/tab-options/commodities.js b/components/tab-options/commodities.js
@@ -240,8 +240,8 @@ export default ({ disabled = false }) => {
               onClick={() => {
                 document.getElementById('location').value = ''
                 setLastUpdatedFilter(COMMODITY_FILTER_MAX_DAYS_AGO_DEFAULT)
-                setFleetCarrierFilter(COMMODITY_FILTER_FLEET_CARRIER_DEFAULT)
                 setMinVolumeFilter(COMMODITY_FILTER_MIN_VOLUME_DEFAULT)
+                setFleetCarrierFilter(COMMODITY_FILTER_FLEET_CARRIER_DEFAULT)
                 setLocationFilter(COMMODITY_FILTER_LOCATION_DEFAULT)
                 setDistanceFilter(COMMODITY_FILTER_DISTANCE_DEFAULT)
               }}

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ardent-www",
-  "version": "0.90.0",
+  "version": "0.91.0",
   "description": "Ardent Industry",
   "main": "index.js",
   "scripts": {

diff --git a/pages/commodity/[commodity-name]/index.js b/pages/commodity/[commodity-name]/index.js
@@ -26,6 +26,7 @@ const TABS = ['default', 'importers', 'exporters']
 export default () => {
   const router = useRouter()
   const [navigationPath, setNavigationPath] = useContext(NavigationContext)
+  const [cachedQuery, setCachedQuery] = useState()
   const [tabIndex, setTabIndex] = useState(0)
   const [commodity, setCommodity] = useState()
   const [exports, setExports] = useState()
@@ -53,10 +54,10 @@ export default () => {
     const commodityName = window.location.pathname.split('/')[2]
     if (!commodityName) return
 
-    const queryType = window.location.pathname.split('/')[3]?.toLowerCase()
-    if (!queryType) return
+    const activeTabName = window.location.pathname.split('/')[3]?.toLowerCase()
+    if (!activeTabName) return
 
-    if (queryType === 'importers') {
+    if (activeTabName === 'importers') {
       setImports(undefined)
       ;(async () => {
         const imports = await getImports(commodityName)
@@ -78,7 +79,7 @@ export default () => {
       })()
     }
 
-    if (queryType === 'exporters') {
+    if (activeTabName === 'exporters') {
       setExports(undefined)
       ; (async () => {
         const exports = await getExports(commodityName)
@@ -106,6 +107,19 @@ export default () => {
       const commodityName = router.query?.['commodity-name']
       if (!commodityName) return
 
+      // Compare current tab (i.e. Importers, Exporters) and query options
+      // If they have not actually changed then avoid triggering a redraw.
+      const activeTabName = window.location.pathname.split('/')[3]?.toLowerCase()
+      if (activeTabName) {
+        const cacheFingerprint = JSON.stringify({ activeTabName, query: router.query })
+        if (cachedQuery && cachedQuery === cacheFingerprint) {
+          return // If query has not changed, we don't need to do anything
+        } else {
+          // If query really has changed then update the cached query
+          setCachedQuery(cacheFingerprint)
+        }
+      }
+
       setImports(undefined)
       setExports(undefined)
 
@@ -162,7 +176,12 @@ export default () => {
             className='clear'
             onSelect={
               (newTabIndex) => {
-                router.push(`/commodity/${router.query['commodity-name'].toLocaleLowerCase()}/${(newTabIndex > 0) ? TABS[newTabIndex] : ''}${window.location.search}`)
+                // Explicitly specifying default query string options makes identifying
+                // a query cache hit easier (and helps avoid unnecessary network requests)
+                const queryString = window.location.search
+                  ? window.location.search
+                  : `?maxDaysAgo=${COMMODITY_FILTER_MAX_DAYS_AGO_DEFAULT}&minVolume=${COMMODITY_FILTER_MIN_VOLUME_DEFAULT}&fleetCarriers=${COMMODITY_FILTER_FLEET_CARRIER_DEFAULT}`
+                router.push(`/commodity/${router.query['commodity-name'].toLocaleLowerCase()}/${(newTabIndex > 0) ? TABS[newTabIndex] : ''}${queryString}`)
               }
             }
           >