@dewib/xhr-cache

XHR Cache Module v1.0.5

Cache application/json api resources and serve it as static resource

Setup

yarn add @dewib/xhr-cache # yarn
npm i @dewib/xhr-cache # npm

Basic usage

Firstly, you need to add xhr-cache to your Nuxt config.

// nuxt.config.js

{
  modules: [
    [
      '@dewib/xhr-cache'
    ]
  ]
}

Then you can add all resources that you want to cache by adding it to your Nuxt config.

// nuxt.config.js

{
  xhrCache: {
    rootFolder: 'cache', // Root folder of cached resources (default value)
    rootUrl: 'static', // Root url of cached resources (default value)
    maxAge: 3600 * 1000 // Age of cached files (default value)
    clean: true // Clean all resources on nuxt start (default value)
    resources: [
      {
        name: 'xhr-cache', // Used for identifier but also for file name and url
        init: false, // Used to call the resource at nuxt start (default value)
        request: { // Axios request https://github.com/axios/axios#request-config
          method: 'get',
          url: 'http://www.mocky.io/v2/5d9e4c643200002a00329d0a'
        },
        catch: [] // (Optional) Value used if request error or no content
      }
    ]
  }
}

Refresh content manually

XHR cache expose routes to refresh a resource manually

All routes are exposed once the first called has been made to the resource or if the init resource option is set to true

The refresh route is generated like this:

path.join(
  conf.rootUrl, // Route url from config
  'refresh',
  id) // Generated id of resource

Advanced usage

With XHR cache you can customize the default middleware and the initial value. Here a configuration to cache specific categories from a specific store

// nuxt.config.js
{
  xhrCache: {
    resources: [
      {
        name: 'categories',
        request: ({ storeId }) => ({
          method: 'get',
          url: `api/v1/categories`,
          params: {
            storeId
          }
        }),
        init: async ({ store }) => { 
          const ctx = { storeId: 'REF' }
          const path = `categories/categories-${storeId}.json`

          await store(path, ctx)
        },
        middleware: {
          // Handle regex path. 
          // Usage: https://github.com/pillarjs/path-to-regexp#readme
          path: 'categories/:storeId(\\d*|REF)',
          handler: async (req, res, { get, store }) => {
            const ctx = { storeId: req.params.storeId }
            const path = `categories/categories-${ctx.storeId}.json`

            let content = get(path)

            if (!content) content = await store(path, ctx)

            res.end(JSON.stringify(content))
          }
        }
      }
    ]
  }
}

Methods

Store and get methods are inject to middlware and initial config and allows you to interact with the file system.

store (path, context: optional)

Store requested content to file system

• path: file system path
• context: injected and used for axios request

get (path)

Get file from filesystem

• path: file system path

License

MIT License