Today, I want to introduce you to a utility that will make caching in the local file system extremely easy. This utility is called and it’s built into . fileCache Splendid UI npm install splendid-ui To use the utility, import from Splendid UI. fileCache Give it a directory and a file name. The directory determines where to store the cached file. The file name determines the name of the file. import { fileCache } from 'splendid-ui/node'

const cache = await fileCache({
  dirname: '.cache',
  file: `${id}.json`,
}) When you want to save values into the cache, just use the save method. Values will automatically be converted into JSON. const objectToSave = { some: 'value' }
await cache.save(objectToSave) When you want to load the cache, use the load method. This method returns a promise. cache.load() Invalidating the cache returns the file's timestamp. If you're familiar with Node, this is the value you get from . fileCache modifiedAt mstimeMs fs.stat You can use this timestamp to check whether you want to invalidate the cache. modifiedAt function getValues () {
  const cache = await fileCache(/* ... */)
  const Date = new Date()

  // Load the cache
  if (cache.modifiedAt > Date.now() + 10000) {
    return cache.load()
  }

  // Otherwise, create the cache
  const obj = { some: 'value'}
  await cache.save(obj)
  return obj
} Invalidating the cache when other files change It's more common for cache files to be created with the content from other files. In this case, if these source files change, you will want to invalidate the cache. It's easy to do this with the utility from Splendid UI. getLastModifiedTime returns the last modified time from a list of files. You can use this to decide whether to invalidate the cache. getLastModifiedTime It takes in a glob value so you can specify all the files you want to check. This process is extremely quick, so you don't have to worry about checking lots of files at once. import { getLastModifiedTime } from 'splendid-ui/node'

// Gets the latest modified timestamp of all the files in src/content
const lastModified = await getLatestModifiedTime('src/content/**/*') If the latest modified timestamp exceeds that of the cache, you can invalidate the cache and generate a new one. The process looks like this: import { fileCache, getLastModifiedTime } from 'splendid-ui/node'

function getContent () {
  const cache = await fileCache({ /* ... */ })
  const lastModified = await getLatestModifiedTime(`src/content/`)

  // Load the cache
  if (cache.modifiedAt > lastModified) {
    return cache.load()
  }

  // Otherwise, create the cache
  const obj = { some: 'value'}
  await cache.save(obj)
  return obj
} That's it! Further Reading Check out the documentation for and for more information. fileCache getLatestModifiedTime fileCache getLatestModifiedTime Lastly, if you enjoyed this, you may also enjoy the utilities I've put together in . Splendid UI . Feel free to visit that if you want to have these articles delivered to your email first-hand whenever they're released! 🙂. By the way, this article was originally written on my blog Also published . here

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Effortless Local File System Caching with Splendid UI's fileCache Utility

Too Long; Didn't Read

@zellwk

Credibility

RELATED STORIES