Cache Plugin

The cache plugin is a simple in-memory cache that clears whenever the page reloads or when the client is destroyed. The cache plugin only applies it’s caching logic to queries, as mutations require a fresh response from the server.

The cache plugin handles all the cache policies in villus:

• cache-first: If found in cache return it, otherwise fetch it from the network
• network-only: Always fetch from the network and do not cache it
• cache-and-network: If found in cache return it, then fetch a fresh result from the network and update current data (reactive). if not found in cache it will fetch it from the network and cache it
• cache-only: If found in cache return it, otherwise returns an empty response without errors

vue<script setup>
import { useClient, cache, fetch } from 'villus';

useClient({
  use: [cache(), fetch()],
});
</script>

Options

At this moment the cache plugin doesn’t have any options to customize

Clearing cache

You can clear the cache for all queries using clearCache() present on the cachePlugin instance. You can export the cache plugin to make it accessible to other parts of your code like so:

tsimport { useClient, cache, fetch } from 'villus';

export const cachePlugin = cache();

useClient({
  use: [cachePlugin, fetch()],
});

Then you can import it and clear it whenever it makes sense in your logic:

tsimport { cachePlugin } from '../client';

// anywhere in your code
cachePlugin.clearCache();

Code

You can check the source code for the cache plugin and use it as a reference to build your own