RESTful API fetching and caching for React apps, backed by an immutable state tree
Alternatives To Jetset
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
3 years ago62April 17, 201910mitJavaScript
RESTful API fetching and caching for React apps, backed by an immutable state tree
React Wrangler15
6 years ago4February 10, 2017mitJavaScript
A react component for simple declarative state management with "one way data flow" and side effects
3 years ago7mitPython
REST API for AWS S3 meant to be an interface to immutable artifact storage.
Redux Rest Tools4
6 years ago6mitJavaScript
Redux REST tools
5 years agomitKotlin
Learn & build Kotlin based backend
Alternatives To Jetset
Select To Compare

Alternative Project Comparisons

npm version dependencies


RESTful API fetching and caching for React apps, backed by an immutable state tree

Stop re-solving the problems of fetching, caching, and managing state for your RESTful API, so you can focus on your React app's unique needs.

✨ Advantages of jetset include:

  • Automatic translation of routes into intuitive methods that fetch and cache data smartly
  • Optimistic UI updates by default (with option to turn them off)
  • Zero-config for standard RESTful routes + simple overrides for non-standard routes
  • Immutable state tree guarantees no bugs from unexpected mutations
  • Time travel debugging included with jetset devtools!
  • Abstract away your API implementation details. If your api changes your code doesn't need to.
  • Server-side support (uses isomorphic-fetch behind the scenes)
  • [In progress] Use JSON schemas to express attributes of and relationships between your api models, allowing for even smarter caching, reduction of fetches, type checking, and runtime safety warnings.

This last one will provide some of the value of GraphQL + Relay without all the dependencies and complex set-up.


$ npm i --save jetset


Note: This README and the docs link below are for v2.x. If you are using 1.x see the 1.x docs and 1.x README

See the docs for complete documentation/reference.

To get started just specify your base url and route(s) as props on the Api component.

Quick start

import React from 'react';
import { Api } from 'jetset';

const MyApi = Component =>
  <Api url="" myResource="/my_resource">
    <Component />

export default MyApi(({ myResource }) =>
    { myResource.list(){ data }) =>
      <div>{ data.title }</div>

More complete example:

export default MyApi(({ myResource }) =>

    { /* GET /my_resource */ }
    { myResource.list() item => (
        <span>{ }</span>

        { /* PUT /my_resource/id */ }
        <button onClick={() => item.update({ title: 'renamed' }) }>Rename</button>

        { /* DELETE /my_resource/id */ }
        <button onClick={ item.delete }>Delete</button>

        { /* GET /my_resource/id */ }
        <button onClick={() => myResource.get( ) }>Get detail</button>

    { /* POST /my_resource */ }
    <button onClick={() => myResource.create({ title: 'foo' }) }>Create new item</button>

Example with jetset helpers

This example shows off conditional rendering based on the status of underlying fetches, and the simplicity of search/pagination using jetset.

class MyComponent extends React.Component {

  constructor() {
    this.state = {
      limit: 30,
      offset: 0

  onPrev = () =>
    this.setState( state => ({ offset: state.offset - state.limit }) )

  onNext = () =>
    this.setState( state => ({ offset: state.offset + state.limit }) )

  render() {
    const list = this.props.myResource.list( this.state ); // e.g. GET /my_resource?limit=30&offset=0 (cached)
    return (

      list.isPending ?
      list.error ?
        <span>Error: {list.error.message}</span>
        { item => <div>{ }</div> ) }
        <button onClick={ this.onPrev }>Prev</button>
        <button onClick={ this.onNext }>Next</button>

Example without any React components:

You may want to take advantage of methods in action creators or elsewhere.

import { createActions } from 'jetset';

const api = createActions({ url: '', myResource: '/myResource' });

const myActionCreator = params => {
  api.myResource.create( params ).then( ... )


Note: This README and the docs link below are for v2.x. If you are using 1.x see the 1.x docs and 1.x README

See the docs for complete documentation/reference.

Should I use this or Redux or both?

JetSet at its core is meant to replace all fetching, caching, and state management related to working with RESTful apis. You could use it on its own or in conjunction with a framework like Redux.

Since JetSet is backed by an immutable state tree we've created some tools that you can use to leverage that tree - globalState, localState, etc. (see examples) - but those are auxiliary, meant to be used if you're not already using a framework like Redux but you want something beyond React's component state tools, and/or you want to use time-travel debugging.

Our opinionated general guidelines are:

  • Use JetSet for an application of any size if you're working with a RESTful api.
  • If your application is nothing more than a widget just use React's state tools for the rest of your state management.
  • If your application is desktop scale but not complex, use JetSet's state tools.
  • If your application is complex you should use an actual framework like Redux. But you can still use JetSet to handle all your api interactions.

I just want direct access to my api data!

You can access it via the Jetset store, which is an Immutable.js state tree wrapped in getter/setter/subscribe methods. For example:

import { store } from 'jetset'

store.getState( '$api' )

See for the shape of the API data.

To subscribe to changes:

import { store } from 'jetset'

// subscribe to all changes in api store
store.subscribeTo( '$api', newState => ... )

// subscribe to changes for just a 'users' resource
store.subscribeTo( ['$api', 'users'], newUsersState => ... )

// subscribe to changes for just a particular user model
store.subscribeTo( ['$api', 'users', 'models', '15'], newStateForUserId15 => ... )

// subscribe to changes for particular request
store.subscribeTo( ['$api', 'users', 'requests', '/foo'], newFooRequestState => ... )


  1. Clone this repo

  2. npm i

  3. npm start

  4. Go to http://localhost:8080 (or whatever port you can see assigned in the console)

Source code is available in /examples.


$ npm install && npm test
Popular Immutable Projects
Popular Rest Projects
Popular Computer Science Categories

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.