OengusAPI cache can expire

Various tweaks to account for changes to caching

Related to Issue #47

Author: BobChao87

components/homepage/Marathons.vue

@@ -11,7 +11,7 @@
 
     <div v-if="homepageMarathons" class="marathons-list-container">
       <template v-for="marathonsList in marathonsLists">
-        <template v-if="homepageMarathons[marathonsList.key].length">
+        <template v-if="shouldRenderList(marathonsList.key)">
           <h4 :key="marathonsList.key + 'title'" class="title" :class="marathonsList.headerClass">
             {{ $t(marathonsList.label) }}
           </h4>
@@ -89,6 +89,9 @@ export default Vue.extend({
         'is-dark': index % 2 === 0,
       };
     },
+    shouldRenderList(key: keyof FrontPageMarathons): boolean {
+      return (this.homepageMarathons?.[key]?.length ?? 0) > 0;
+    },
     ...mapActions({
       getFrontPage: 'api/marathon/frontPage',
     }),

components/marathon/schedule/List.vue

@@ -149,12 +149,10 @@ export default Vue.extend({
     },
   },
   mounted(): void {
-    // Every 5 minutes, forcibly update data
-    // Eventually, this will be minute-by-minute but not forced, relying on cache expiration
     this.interval = setInterval(() => {
-      this.getSchedule({ id: this.marathonId, forceFetch: true });
-      this.getScheduleTicker({ id: this.marathonId, forceFetch: true });
-    }, 300_000);
+      this.getSchedule(this.marathonId);
+      this.getScheduleTicker(this.marathonId);
+    }, 60_000);
     this.expandRunHash();
   },
   destroyed(): void {

components/marathon/sidebar/Sidebar.vue

@@ -49,7 +49,8 @@ export default Vue.extend({
       let marathonName = '';
       if (this.marathon) {
         marathonName = this.marathon.name;
-      } else if (this.marathonId) {
+      }
+      if (!marathonName && this.marathonId) {
         const frontPage = (this.$store.state.api.marathon as MarathonState).frontPage;
         if (frontPage) {
           marathonName = [ ...frontPage.live, ...frontPage.next, ...frontPage.open ].find(marathon => marathon.id === this.marathonId)?.name ?? marathonName;

plugins/oengus.ts

@@ -2,22 +2,62 @@ import { ActionContext } from 'vuex';
 import { NuxtHTTPInstance } from '@nuxt/http';
 import { Context } from '@nuxt/types';
 
+export interface OengusStateCacheable {
+  _expires: number;
+}
+export type OengusStateValue<V> = V&OengusStateCacheable|OengusStateCacheable|undefined;
+export interface OengusStateValuesById<V> {
+  [ id: string ]: OengusStateValue<V>;
+}
 export interface OengusState {
-  [ key: string ]: any;
+  [ key: string ]: OengusStateValuesById<any>|OengusStateValue<any>;
 }
 
-export interface GetterArgs<U, V> {
+/**
+ * Used to create a specific API endpoint
+ * U refers to the type retruned by the API
+ * V refers to the type that ends up in the state and defaults to U
+ */
+export interface GetterArgs<U, V = U> {
+  /**
+   * Final portion of the API path.
+   * Follows the id, if provided, which in turn follows the basePath.
+   * e.g. basePath/id/path or basePath/path
+   */
   path?: string;
+  /**
+   * Key these responses are stored in in the state object
+   * e.g. state[key]
+   */
   key: string;
-  transform?(value: U, id?: number|string): V;
+  /**
+   * Name of the mutation function to store the responses
+   * If not provided, uses addKey, e.g. if key is 'users' it picks 'addUsers'
+   */
   mutation?: string;
+  /**
+   * Used to alter the raw API response to whatever is stored in the state
+   * This can be strip, change, or add new values or even change into a full class
+   */
+  transform?(value: U, id?: number|string): V&OengusStateCacheable;
+  /**
+   * How long should responses be cached for
+   * Can be ignored with forceFetch
+   * Defaults to 5 minutes
+   */
+  cacheDuration?: number;
 }
 
 export interface ExtendedFetch {
   id?: number|string;
   forceFetch?: boolean;
 }
 
+/**
+ * The actual function returned by a specific API for the action
+ * T refers to the state
+ * V refers to the type that ends up in the state
+ */
 export type GetterFunc<T, V> = (context: ActionContext<T, T>, id?: number|string|ExtendedFetch) => Promise<V|undefined>;
 
 export class OengusAPI<T extends OengusState> {
@@ -30,50 +70,67 @@ export class OengusAPI<T extends OengusState> {
    * U is the type returned by the API
    * V is the type that will get stored. V is equal to U except when transform is given
    */
-  public get<U, V = U>({ path, key, transform, mutation }: GetterArgs<U, V>): GetterFunc<T, V> {
+  public get<U, V = U>(
+    { path, key, transform, mutation: _mutation, cacheDuration: _cacheDuration }: GetterArgs<U, V>,
+  ): GetterFunc<T, V> {
+    const mutation = _mutation ?? `add${key[0].toUpperCase()}${key.slice(1)}`;
+    // Five minutes unless overridden
+    const cacheDuration = _cacheDuration ?? 300_000;
     return async ({ commit, state }, id) => {
       let forceFetch = false;
       if (typeof id === 'object') {
         forceFetch = id.forceFetch ?? forceFetch;
         id = id.id;
       }
 
-      // Cache check (needs improvements)
-      let response: U|V = id ? state[key][id] : state[key];
-      if (response !== undefined && !forceFetch) {
+      // Cache check
+      let response: OengusStateValue<U|V> = id ? state[key][id] : state[key];
+      const cachedTime = response?._expires ?? 0;
+      if (cachedTime + cacheDuration > Date.now() && !forceFetch) {
         return response as V;
       }
-      const updating = response !== undefined;
-      const resolvedMutation = mutation ?? `add${key[0].toUpperCase()}${key.slice(1)}`;
-      if (updating) {
+
+      if (cachedTime) {
         // Mark the entry as updating by changing the cache expired marker
+        // This allows existing stuff to continue to use the cached value,
+        commit(mutation, { id, value: { ...response, _expires: Date.now() } });
       } else {
-        // Mark the entry as "being fetched" by marking it `null` (only `undefined` is empty)
-        commit(resolvedMutation, { id, value: null });
+        // Mark the entry as "being fetched" by giving it a promise
+        // Anything that wants to read the value is welcome to await it or use Vuex's observers
+        commit(mutation, { id, value: { _expires: Date.now() } });
       }
 
       // Fetch and store into cache
       const route = `${this.basePath}${id ? `/${id}` : ''}${path ? `/${path}` : ''}`;
+      let apiResponse: U&OengusStateCacheable;
       try {
-        response = await OengusAPI.http.$get(route);
+        apiResponse = await OengusAPI.http.$get(route);
       } catch {
         // This isn't intrinsically bad, just catch the error, mark as not fetching, and return nothing
-        if (updating) {
-          // What should we do here? Right now, nothing, leave the old value.
+        if (cachedTime) {
+          // Reset the old cache timer, maybe the API is just down (should we worry about loops?)
+          commit(mutation, { id, value: response });
         } else {
-          commit(resolvedMutation, { id, value: undefined });
+          commit(mutation, { id, value: undefined });
         }
         return;
       }
+      response = apiResponse;
+
       if (transform) {
         response = transform(response as U, id);
       }
-      commit(resolvedMutation, { id, value: response as V });
+      response._expires = Date.now();
+      commit(mutation, { id, value: response as OengusStateValue<V> });
       return response as V;
     };
   }
 }
 
+/**
+ * Makes sure anything that OengusAPI needs is created
+ * All values this write to must be static, so they can be shared among instances
+ */
 export default function setupOengusAPI({ $http }: Context) {
   OengusAPI.http = $http;
 }

store/api/user.ts

@@ -25,11 +25,7 @@ export const mutations: MutationTree<UserState> = {
 
 export const actions: ActionTree<UserState, UserState> = {
   get: UserOengusAPI.get<User>({ key: 'users', mutation: 'addUser' }),
-  exists: UserOengusAPI.get<UserExists, boolean>({
-    path: 'exists',
-    key: 'exists',
-    transform: userExists => !!userExists.exists,
-  }),
+  exists: UserOengusAPI.get<UserExists>({ path: 'exists', key: 'exists' }),
   search: UserOengusAPI.get<Array<User>>({
     path: 'search',
     key: 'searches',

types/api/user.d.ts

@@ -13,11 +13,6 @@ export interface User {
 }
 
 export interface UserExists {
-  exists?: boolean;
-}
-
-export interface AddExists {
-  username: string;
   exists: boolean;
 }
 
@@ -28,6 +23,6 @@ export interface AddSearch {
 
 export interface UserState extends OengusState {
   users: { [username: string]: User; };
-  exists: { [username: string]: boolean; };
+  exists: { [username: string]: UserExists; };
   searches: { [query: string]: Array<User>; };
 }