@jayrbolton/flyd-crud
v0.0.1
Published
flyd ajax crud functionality
Downloads
3
Readme
flyd-crud
Easily manage a ajax in your UI logic of data using event streams.
crud({options})
options
is an object that can contain any number of properties for each different kind of ajax request that you want. The property name is an arbitrary name you can pick (eg 'create', 'index', 'read', 'fetch', 'update', 'destroy', etc, etc). The value of each property is a set of request options
The only reserved property name is any. This allows you to set defaults for all the other requests. The properties in your any options will get merged into the other request options.
Request options can include these properties:
method
: (required) the HTTP method for this request ('get', 'patch', 'put', 'post', 'delete', etc)params$
: (required) a stream of data that triggers a new ajax request, with this data being sent as JSON in the requestpath
: (required) string path for this request, or a function that receives the data from theparams$
stream and should return a string pathheaders
: (optional) an object of header keys and values for the requesturl
: (optional) the base url for this request, which the path gets appended toonSuccess
: (optional) give an array of string names of other requests that you want to trigger when this request completes successfully (status === 200)onStart
: (optional) an array of names of other requests that you want to trigger when this request startsonFail
: (optional) an array of names of other requests that you want to trigger when this request fails (status !== 200)
// Stream of new user objects, maybe from some form data
const newUser$ = flyd.stream()
// A stream of user objects that we want to delete on the server
const userToDelete$ = flyd.stream()
const users = flyd.crud({
// Options in "any" get merged into all the request below
// Here we are setting some global headers
any: {
headers: {'Content-Type': 'application/json'}
}
, create: {
method: 'post'
, params$: newUser$
, path: u => `/users/${u.id}`
, onSuccess: ['index']
}
, index: {
method: 'get'
, path: '/users'
, params$: userQuery$
}
, delete: {
method: 'delete'
, params$: userToDelete$
, path: u => `/users/delete?id=${u.id}`
, onSuccess: ['index']
}
})
userUpdates$({name: "Bob"})
users.loading$() // returns true
users.create.loading$() // returns true
// ... wait until request is finished
users.loading$() // returns false
users.create.loading$() // returns false
users.index.body$ // will receive the result of indexing users, triggered by the update using `onSuccess`
users.index.error$
userUpdates$({what: 'what'})
users.loading$() // true
// ...
users.loading$() // false
users.error$() // "Name is required"
users.body$() // -> [{name: "Bob", id: 1}]
Return value
The return value of calling flyd.crud({options})
is an object that contains helpful streams that indicate the status of your requests:
result.loading$
: boolean, whether any request still pendingresult.error$
: the response body of an error result from the last request that hadstatus !== 200
result.body$
: the response body of the last request that succeeded (wherestatus === 200
)
The returned object also has properties for each request name that you gave. Each property has its own status streams for loading$
, body$
, and error$
. For example, if you had a request called fetch
, then the resulting object will have result.fetch.loading$
, result.fetch.body$
, and result.fetch.error$