cachejax

Load data from your Baobab model before making a remote request

Motivation

• Say you're writing a JS app with the URL /messages.
• When a user navigates to /messages, you need to load all the messages for the logged in user.
• Say you have another route: messages/:id.
• If you want to support linking in your application (and you should!), now you need to re-fetch all the messages in that route.
• This is wasteful and forfeits one of the nice things about 'rich client' JS apps: avoiding round trips to the server for data.

cachejax is a small wrapper around the axios ajax library that supports data caching with baobab. It decides whether to fetch data directly from the client (baobab) or make a remote request.

It's designed to be used with cerebral and was extracted from a cerebral project, but can be used with only baobab.

Install

---

npm install cachejax

Usage

---

Config

Supply a config object mapping paths to ajax endpoints:

constconfig={currentUser: {mapping: 'http://oath.dev/api/v1/me.json',root: false},messages: {mapping: 'http://app.com/api/messages/v3/messages/:id',// you can use express style routesroot: 'message',batch: true}}

config options:

{root: Boolean||String,// default: truemapping: String,// requiredbatch: Boolean// default: false};

• root - does the response JSON have a root key? {user: {...}} or {...} or customize the key name 'user'
• mapping - associate a Baobab path with a URL to fetch data
• batch - will you make batched requests to this endpoint?

Initialize

Pass config and your baobab instance to the Cachejax constructor:

importCachejaxfrom'cachejax';constbaobab=newBaobab({});constcachejax=Cachejax(baobab,config);

Call

Use cachejax anywhere you would normally make an http request:

cachejax.get('currentUser').then((response)=>{// response.data}).catch((response)=>{// handle error});

• cachejax.get() will check if data exists at baobab.get('currentUser') if not, it will fetch the data from http://oath.dev/api/v1/me.json
• get() always returns a Promise whether data is found on the client or fetched from the server.
• data is available at response.data. The full axios response object will, however, be returned when a remote request is made.

API

---

• cachejax.get(path||url, params, config) => Promise

  • path - a baobab path name to fetch data
  • url - a URL to fetch data from
  • params - url params, query params, or attributes to filter by in baobab
  • config - any overrides or customization to Cachejax() base config
  • Promise - returns a then()able object whether fetched from AJAX or baobab

  Examples:

  letcachejax=Cachejax(model,config);

  • Using a baobab path 'conversations':

    letconfig={conversations: {mapping: 'http://app.com/api/v1/conversations'}}cachejax.get('conversations')// => baobab.get('conversations') or GET /api/v1/conversations 

  • baobab path with URL param (express.js style routes):

    letconfig={conversations: {mapping: 'http://app.com/api/v1/conversations:id'}}cachejax.get('conversations',{id: 3})// => baobab.get('conversations') or GET /api/v1/conversations/3

  • baobab path with query param:

    letconfig={conversations: {mapping: 'http://app.com/api/v1/conversations'}}cachejax.get('conversations',{id: 3}// => baobab.get('conversations') or GET /api/v1/conversations?id=3

  • Normal AJAX call:

    cachejax.get('http://www.google.com');

• cachejax.batch([data], mappingFunction) => [Promise]

  • [data] - an array of data, e.g. user_ids
  • mappingFunction - a function mapping data to a Request (Promise)
  • [Promise]: an array of fulfilled Promises

  Given the config:

  messages: {mapping: 'http://app.com/api/v3/messages/:id',root: 'message',batch: true}

  cachejax will exectue each get() concurrently (delegating to axios.all):

  letids=[3,5,3,35,4]cachejax.batch(ids,(id)=>cachejax.get('messages',{id: id})).then((messages)=>{// messages = [{id: 3,...},{id: 5,...}, {id: 35,...}...]baobab.set('messages',messages);})

• cachejax.setAuthorization(token)

  • Sets a bearer token Authorization header for all ajax requests

• axios proxy methods

  • cachejax.all()
  • cachejax.delete()
  • cachejax.head()
  • cachejax.post()
  • cachejax.put()
  • cachejax.patch()