Skip to content

Load data from your Baobab model before making a remote request

Notifications You must be signed in to change notification settings

bfitch/cachejax

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

31 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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:

const config = {
  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 routes
    root: 'message',
    batch: true
  }
}

config options:

{
  root:    Boolean || String, // default: true
  mapping: String,            // required
  batch:   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:

import Cachejax from 'cachejax';

const baobab = new Baobab({});
const cachejax = 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:

    let cachejax = Cachejax(model, config);
    • Using a baobab path 'conversations':

      let config = { 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):

      let config = { 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:

      let config = { 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):

    let ids = [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
    • cachejax.all()
    • cachejax.delete()
    • cachejax.head()
    • cachejax.post()
    • cachejax.put()
    • cachejax.patch()

About

Load data from your Baobab model before making a remote request

Resources

Stars

Watchers

Forks

Packages

No packages published