collider-particle

Collider-Particle

Fetch handler for React-Collider (can be used outside).

Collider-Particle gather all the calls your components need from an API and join then to make the smallest number of call possible. For example if a module needs to call /video/1?fields=title and another one needs /video/1?fields=created_time, collider-particle will call /video/1?fields=title,created_time.

Installation

$ npm install --save collider-particle

Usage

If you use collider-particle with react-collider:

import particle from 'collider-particle'
import {server as collider} from 'react-collider'
import routes from './routing'

collider(routes, particle({baseUrl: 'https://api.dailymotion.com'}))

import provider from 'provider'

class VideoItem extends React.Component {
    static fields() {
        return ['title', 'thumbnail_240_url']
    }
    static endpoint() {
        return '/video'
    }
    render() {
        return (
            <div>{this.props.title}<div>
        )
    }
}

export default class VideoList extends React.Component {
    static getDependencies() {
        return [VideoItem]
    }
    static endpoint() {
        return '/videos'
    }
    static fields() {
        return ['title', 'owner.usernname']
    }
    static fetchData() {
        return provider(this)
    }
    render() {
        var videos = this.props.data.list.map(function(video) {
            return <VideoItem />
        })

        return (
            <div>{videos}</div>
        )
    }
}