Set & Query Cache

The cache also supports updating and querying, As we mentioned in cache mode, each cached data is saved with the method instance that sends the request as the key, so the method instance will also be used when updating the cache manually to find the corresponding cached data.

Update static cache data

vue composition

<template>
  <button @click="handleTodolistToggle">Switch date, hit cache</button>
</template>
<script setup>
  import { setCache } from 'alova';
  import { ref } from 'vue';

  const getTodoListByDate = dateList =>
    alovaInstance.Get('/todo/list/dates', {
      params: { dateList }
    });
  // Get 5 days of data in batches during initialization
  const dates = ref(['2022-05-01', '2022-05-02', '2022-05-03', '2022-05-04', '2022-05-05']);
  const {
    //...
    onSuccess
  } = useWatcher(() => getTodoListByDate(dates.value.join()), [dates], {
    immediate: true
  });
  onSuccess(todoListDates => {
    if (todoListDates.length <= 1) {
      return;
    }

    // By default, the data of these 5 days will be cached together in a key
    // In order to make subsequent requests for data of a certain day also hit the cache, we can disassemble the data of 5 days into days, and manually set the response cache successively through setCache
    todoListDates.forEach(todoDate => {
      // setCache parameter description:
      // Parameter 1: method instance object, which is used to specify the key of the cache
      // Parameter 2: Cache data
      setCache(getTodoListByDate(todoDate.date), [todoDate]);
    });
  });

  const handleTodolistToggle = () => {
    // At this time, when the switching date is May 1, it will hit the response cache we manually set.
    // The dates value is being monitored by useWatcher, so changing it can automatically trigger the request
    dates.value = ['2022-05-01'];
  };
</script>

react

import { setCache } from 'alova';
import { useState } from 'react';

const getTodoListByDate = dateList =>
  alovaInstance.Get('/todo/list/dates', {
    params: { dateList }
  });

const App = () => {
  // Get 5 days of data in batches during initialization
  const [dates, setDates] = useState(['2022-05-01', '2022-05-02', '2022-05-03', '2022-05-04', '2022-05-05']);
  const {
    //...
    onSuccess
  } = useWatcher(() => getTodoListByDate(dates.join()), [dates], {
    immediate: true
  });
  onSuccess(todoListDates => {
    if (todoListDates.length <= 1) {
      return;
    }

    // By default, the data of these 5 days will be cached together in a key
    // In order to make subsequent requests for data of a certain day also hit the cache, we can disassemble the data of 5 days into days, and manually set the response cache one by one through setCache
    // The first parameter of setCache is the method instance object, which is used to specify the key of the cache
    // The second parameter is the cached data
    todoListDates.forEach(todoDate => {
      setCache(getTodoListByDate(todoDate.date), [todoDate]);
    });
  });

  const handleTodolistToggle = () => {
    // At this time, when the switching date is May 1, it will hit the response cache we manually set.
    // The dates value is being monitored by useWatcher, so changing it can automatically trigger the request
    setDates(['2022-05-01']);
  };

  return <button onClick={handleTodolistToggle}>Switch date, hit cache</button>;
};

svelte

<script>
  import { setCache } from 'alova';
  import { writable } from 'svelte/store';

  const getTodoListByDate = dateList =>
    alovaInstance.Get('/todo/list/dates', {
      params: { dateList }
    });
  // Get 5 days of data in batches during initialization
  const dates = writable(['2022-05-01', '2022-05-02', '2022-05-03', '2022-05-04', '2022-05-05']);
  const {
    //...
    onSuccess
  } = useWatcher(() => getTodoListByDate($dates.join()), [dates], {
    immediate: true
  });
  onSuccess(todoListDates => {
    if (todoListDates.length <= 1) {
      return;
    }

    // By default, the data of these 5 days will be cached together in a key
    // In order to make subsequent requests for data of a certain day also hit the cache, we can disassemble the data of 5 days into days, and manually set the response cache one by one through setCache
    // The first parameter of setCache is the method instance object, which is used to specify the key of the cache
    // The second parameter is the cached data
    todoListDates.forEach(todoDate => {
      setCache(getTodoListByDate(todoDate.date), [todoDate]);
    });
  });

  const handleTodolistToggle = () => {
    // At this time, when the switching date is May 1, it will hit the response cache we manually set.
    // The dates value is being monitored by useWatcher, so changing it can automatically trigger the request
    $dates = ['2022-05-01'];
  };
</script>
<button on:click="{handleTodolistToggle}">Switch date, hit cache</button>

vue options

<template>
  <button @click="handleTodolistToggle">Switch date, hit cache</button>
</template>
<script>
  import { setCache, useWatcher } from 'alova';
  import { mapAlovaHook } from '@alova/vue-options';

  const getTodoListByDate = dateList =>
    alovaInstance.Get('/todo/list/dates', {
      params: { dateList }
    });

  export default {
    mixins: mapAlovaHook(function () {
      return {
        todo: useWatcher(() => getTodoListByDate(this.dates.join()), ['dates'], {
          immediate: true
        })
      };
    }),
    data() {
      return {
        // Get 5 days of data in batches during initialization
        dates: ['2022-05-01', '2022-05-02', '2022-05-03', '2022-05-04', '2022-05-05']
      };
    },
    mounted() {
      this.todo$onSuccess(({ data: todoListDates }) => {
        if (todoListDates.length <= 1) {
          return;
        }

        // By default, the data of these 5 days will be cached together in a key
        // In order to make subsequent requests for data of a certain day also hit the cache, we can disassemble the data of 5 days into days, and manually set the response cache successively through setCache
        todoListDates.forEach(todoDate => {
          // setCache parameter description:
          // Parameter 1: method instance object, which is used to specify the key of the cache
          // Parameter 2: Cache data
          setCache(getTodoListByDate(todoDate.date), [todoDate]);
        });
      });
    },
    methods: {
      handleTodolistToggle() {
        // At this time, when the switching date is May 1, it will hit the response cache we manually set.
        // The dates value is being monitored by useWatcher, so changing it can automatically trigger the request
        this.dates = ['2022-05-01'];
      }
    }
  };
</script>

Dynamically set cache data

You can also pass in a callback function in setCache to dynamically calculate the cache data and return the cache data that needs to be updated.

setCache(getTodoListByDate('2022-10-01'), oldCache => {
  // Return the data that needs to be cached
  return {
    ...oldCache,
    expire: isAfter('2022-10-01', new Date())
  };
});

Similarly, you can also dynamically find method instances through method instance matcher.

setCache(
  {
    name: 'todoList',
    filter: (method, index, ary) => {
      return index < 5;
    }
  },
  'newCache'
);

Abort to set cache

Sometimes you need to dynamically determine whether to update the cache. If no data is returned in the callback function of setCache, or undefined is returned, the original cache data will not be updated at this time

setCache(getTodoListByDate('2022-10-01'), oldCache => {
  const isExpired = isAfter('2022-10-01', new Date());
  if (!isExpired) {
    return; // abort cache updating when return the undefined
  }
  return null; // update the cache to null
});

Cache query

At the same time, we also provide a cache query method.

import { queryCache } from 'alova';

const cacheData = queryCache(getTodoListByDate('2022-10-01'));

You can also dynamically find method instances via method instance matcher.

const cacheData = queryCache({
  name: 'todoList',
  filter: (method, index, ary) => {
    return index < 5;
  }
});