BlueChip

Search…
BlueChip
BlueChip helps you manage your data in a consistent way when working with client-side JavaScript state management systems.
Source
Github
​https://github.com/mfpiccolo/blue-chip​
NPM
​https://www.npmjs.com/package/blue-chip​
The Basics 
There are only two things that BlueChip does.
1.Normalize data and organize it in a store.
2.Retrieve the data from the store and prepare it for use.
What BlueChip Is 
State API
BlueChip will take your data, normalize it and place it into a shared resources store. The API on this side is pretty minimal.
updateResources() - Takes an entire payload of resources, normalize it and merge it into the store.
updateResource() - Merges in a single resource into your store
removeResource()  - Self explanatory.  Yay self documenting code!
And that is it for the State API.
Selector API  
This is the meat of BlueChip. The selector API is how you prepare your data to be consumed by components. To select data, BlueChip offers a robust ORM-style syntax complete with models, relationships, filtering, includes and more. You only needs access to the resources store to be able to use the selector api. 
Here is an example of using the ORM syntax to select from the store
1
Checklist.query(resources)
2
  .where({ active: true })
3
  .includes(['tasks'])
4
  .toObjects()
Copied!
What BlueChip Is Not 
Fetching
BlueChip is not interested in how you get your data. Fetch it, mock it, import it. However you get your data that is your business. The only requirement is that your data is formatted according to one of the adapters (JsonAPI, GraphQL). If it is not formatted you can write a custom adapter to normalize it.
Client Side Store 
BlueChip is agnostic to which client-side state management library you choose to use (Redux, Mobx, Vuex, other). You only need access to a shared resources store for BlueChip to work.
Why BlueChip?
1.You have multiple data sources (or multiple projects with different data sources) and want to consistently interact with all of them in the same way in your client-side state management systems.  You can easily normalize and connect components from GraphQL, JsonAPI and custom formatted API's.
2.You already have a state manager that you like or is a requirement of a project and do not want to adopt multiple to handle both GraphQL and JSON Rest data.
3.You would like to keep resources unnessted in your stores for ease of updating, simplicity of mutation schema and ability to easily share resources across your application.
4.You are familiar with and prefer using ORM's when querying and working with data. 
Redux Demo
Demo BlueChip Applicaiton
MobX Demo
Getting Started 
To start, choose your state management flavor. This is an example using Redux.
1
$ npm i -S blue-chip
Copied!
Or
1
yarn add blue-chip
Copied!
Redux
Actions
Batch update resources:
1
import { updateResources } from 'blue-chip';
2
​
3
export const fetchChecklists = async (dispatch, state) => { 
4
  dispatch({ type: "LOADING_DATA" }); 
5
  try { 
6
    const response = await fetch("/checklists.json"); 
7
    const payload = await response.json();
8
    updateResources(payload, dispatch); 
9
    dispatch({ type: "LOADING_SUCCESS" }); } 
10
  catch (error) { 
11
    dispatch({ type: "LOADING_ERROR" }); 
12
  }
13
};
Copied!
Update a single resource:
1
import { updateResource } from 'blue-chip';
2
​
3
export const updateTask = ({ id, ...attributes }, dispatch) => { 
4
  const resource = { id, attributes, type: "tasks" };
5
  updateResource(resource, dispatch);
6
};
Copied!
Reducers
1
import { combineReducers } from "redux";
2
import { resourcesReducer as resources } from 'blue-chip';
3
​
4
export default combineReducers({resources});
Copied!
Models
Just like any other ORM you will be defining model classes:
1
import { BaseModel } from "blue-chip";
2
import Task from "./Task";
3
​
4
export default class Checklist extends BaseModel { 
5
   static get hasMany() { return [Task]; }
6
}
Copied!
1
import { BaseModel } from "blue-chip";
2
import Checklist from "./Checklist";
3
​
4
export default class Task extends BaseModel { 
5
  static get belongsTo() { return [Checklist]; }
6
}
Copied!
Containers
1
const mapStateToProps = state => { 
2
  const { resources } = state; 
3
  return { 
4
    loading: state.dataReducer.loading, 
5
    error: state.dataReducer.error, 
6
    checklists: Checklist.query(resources) 
7
                  .all() 
8
                  .includes(["tasks"]) 
9
                  .toObjects() 
10
  };
11
};
12
​
13
const mapDispatchToProps = dispatch => ({ 
14
  updateTask: task => updateTask(dispatch, task)
15
});
16
​
17
export default connect(mapStateToProps, mapDispatchToProps)(Container);
Copied!
Store Structure
The resources store is structured as an object with top-level keys as pluralized resource names.
1
const store = {
2
  resources: {
3
    checklists: {},
4
    tasks: {}
5
  }
6
};
Copied!
Each resource key points to an object that contains ids as keys and an JSON api object as a value.
1
const store = {
2
  checklists: {
3
    1: {
4
      id: 1,
5
      attributes: { name: "Oboarding" },
6
      links: { self: "http://example.com/checklists/1" },
7
      relationships: {
8
        tasks: {
9
         data: [{ id: 1, type: "tasks: }, { id: 2, type: "tasks: }],
10
       },
11
       type: "checklists"
12
    }
13
  },
14
  tasks: {
15
  ...
16
}  
Copied!
Project Status
This project is currently in Alpha/Experimental phase.  The APIs will almost assuredly change prior to 1.0.  It is not ready for production yet so use at your own risk.  There are also unfinished features like MobX adapter
RoadMap
1.belongsTo relationship
2.Add Unstated adapter
3.Change API to be more modular to allow for configuring adapters
4.Memoization
​
API
Last modified 3yr ago
Copy link
Contents