React Parse include 3 data provider components, to make the life even easier and let you get a collection from the server in less than 1 minute with the ability to filter result, create a new document and more...
Install with NPM:
npm i react-parse --save
Set react-parse inside your root component:
import { config as reactParseConfig, setReactParseDispatch } from 'react-parse'
const apiConfig = { baseURL: envConfig.SERVER_URL, appId: envConfig.PARSE_ID }
reactParseConfig.init(apiConfig);
setReactParseDispatch(store.dispatch);
reactParseConfig.setSessionToken('userSessionToken')
reactParseConfig.removeSessionToken()
import { parseReducer } from 'react-parse';
const rootReducers = combineReducers({
....,
parse: parseReducer,
});
import { parseWatcher } from 'react-parse'
function* rootSaga() {
yield all([
...,
call(parseWatcher, 'parseWatcher'),
]);
}
Fetch collection data with data provider component
import {FetchCollection} from 'react-parse'
const TARGET_NAME = 'activeProducts'
class ReactParseExample extends React.Component {
render() {
return (
<FetchCollection
schemaName={'Product'}
targetName={TARGET_NAME}
query={{isActive: true}}
userName='Dan'
render={(props) => <MyTable {...props}/>}
/>
)
}
}
/*
MyTable will get props from FetchCollection, MyTable props will be:
const {schemaName, targetName, userName, fetchProps} = this.props
const {data,error,status,info,isLoading,refresh,deleteDoc,put,post} = fetchProps
*/
Get Products from server by using collections actions and selectors
import { selectors, actions} from 'react-parse';
const TARGET_NAME = 'ProductList'
class ReactParseExample extends React.Component {
componentWillMount() {
actions.collectionActions.fetchData({ targetName: TARGET_NAME , schemaName: 'Product' });
}
render() {
const { products, isLoading} = this.props;
return (<div....);
} }
const mapStateToProps = (state) => {
return {
products: selectors.selectCollectionData(state, TARGET_NAME ),
isLoading: selectors.selectCollectionLoading(state, TARGET_NAME ),
};
}
import { collectionActions, cloudCodeActions, documentActions } from 'react-parse';
Use like that:
documentActions.fetchData({....})
** we didn't need a dispatch to play the action
action payload options
key | type | info |
---|---|---|
schemaName | string | db schemaName |
targetName | string | target to save the response from server |
query | object | http://docs.parseplatform.org/rest/guide/#queries |
limit | number | number of documents to include in each query |
skip | number | number of documents to skip |
include | string | pointer to include, example: 'Product,User' |
keys | string | keys to include, , example: 'firstName,LastName' |
enableCount | boolean | set true to count objects in the collection |
autoRefresh | boolean | set to to refresh collection data on one of the document change from one of the document actions from the collectionActions |
documentId | string | db document id |
data | object | |
functionName | string | cloud code function name |
params | object | cloud code params |
digToData | string | string that help us find your data, default is 'data.result' |
logger | object | pass to your Logger relevant info |
dataHandler | function | pass function that manipulate data before set to store |
import { actions } from 'react-parse';
// use like that: actions.collectionActions.fetchData(...)
import { collectionActions } from 'react-parse';
// use like that: collectionActions.fetchData(...)
-
GET collection from server: fetchData({schemaName, targetName, query, limit, skip, include, keys, enableCount, logger})
-
POST document postDoc({schemaName, targetName, data, autoRefresh, logger})
-
PUT document putDoc({schemaName, targetName, objectId, data, autoRefresh, logger})
-
DELETE document deleteDoc({schemaName, targetName, objectId, autoRefresh, logger})
-
Refresh your data refreshCollection({targetName})
-
Clean collection from your store: cleanData({targetName})
-
Clean all collections from your store: cleanCollections()
import { documentActions } from 'react-parse';
-
GET Document from server: fetchData({schemaName, targetName, objectId, include, keys, logger})
-
POST document postDoc({schemaName, targetName, data, logger})
-
PUT document putDoc({schemaName, targetName, objectId, data, logger})
-
DELETE document deleteDoc({schemaName, targetName, objectId, logger})
-
Update local data updateField({targetName, key, value, logger})
-
Clean document from your store: cleanData({targetName})
-
Clean all documents from your store: cleanDocuments()
import { cloudCodeActions } from 'react-parse';
-
GET Document from server: fetchData({functionName, targetName, params, digToData, logger})
-
Clean cloudCode from your store: cleanData({targetName})
-
Clean all codes code from your store: cleanCloudsCode()
import {selectors} from 'react-parse'
- selectors .selectCollections(state) // return you all the collection from state.parse.collections
- selectors .selectCollectionData(state, 'TARGET_NAME') // return you the data by tagetName
- selectors .selectCollectionLoading(state, 'TARGET_NAME') // return true if query is loading
- selectors .selectCollectionInfo(state, 'TARGET_NAME') // return query info by tagetName
- selectors .selectCollectionStatus(state, 'TARGET_NAME') // return query status by tagetName
- selectors .selectCollectionError(state, 'TARGET_NAME') // return query error by tagetName
- selectors .selectCollectionCount(state, 'TARGET_NAME') // return the quantity of resultst by tagetName
- selectors .selectDocuments(state)
- selectors .selectDocumentData(state, 'TARGET_NAME')
- selectors .selectDocumentLoading(state, 'TARGET_NAME')
- selectors .selectDocumentInfo(state, 'TARGET_NAME')
- selectors .selectDocumentStatus(state, 'TARGET_NAME')
- selectors .selectDocumentError(state, 'TARGET_NAME')
- selectors .selectCloudCodes(state)
- selectors .selectCloudCodeData(state, 'TARGET_NAME')
- selectors .selectCloudCodeLoading(state, 'TARGET_NAME')
- selectors .selectCloudCodeInfo(state, 'TARGET_NAME')
- selectors .selectCloudCodeStatus(state, 'TARGET_NAME')
- selectors .selectCloudCodeError(state, 'TARGET_NAME')
Data provider components. Seamlessly bring Parse data into your Component with the ability to POST, PUT, DELETE from your component without connecting your component to store or run any action. all is in your props
Data provider component will render you component with all the props you pass to the dataComponent and with fetchProps object. fetchProps include :
- data - response from the server
- error - error object from query
- status - one of the enum
- info - info about your query {timestamp, query,skip,limit,objectId, ...}
- isLoading- boolean value
- refresh - method, run to refresh data
- fetchProps.refresh()
- cleanData - method, run to clean data from store
- fetchProps.cleanData()
- put- method, run to update the document
- from FetchCollection => fetchProps.put('DOC_OBJECT_ID',{title: 'newTitle', body: 'newBody'})
- from FetchDocument => fetchProps.put({title: 'newTitle', body: 'newBody'})
- post- method, run to create document,
- from FetchCollection => fetchProps.post('DOC_OBJECT_ID',{title: 'newTitle', body: 'newBody'})
- from FetchDocument => fetchProps.post({title: 'newTitle', body: 'newBody'})
- deleteDoc- method, run to delete document,
- from FetchCollection => fetchProps.deleteDoc('DOC_OBJECT_ID')
- from FetchDocument => fetchProps.deleteDoc({title: 'newTitle', body: 'newBody'})
- updateField - method on FetchDocumnet to update filed in store
- fetchProps.updateField('title', 'new Title)
With FetchDocument
you can get specific document by collection name and objectId
import {FetchDocument} from 'react-parse'
....
<FetchDocument
schemaName='Post'
targetName='LastPost'
objectId='blDxFXA9Wk'
component={MyComponent} // or user render={(props)=> <MyComponent ...props/>}
// optional:
keys='title,body,owner'
include='Owner'
onFetchEnd={({error, status, data, info })=>{}}
onPostEnd={({error, status, data, info })=>{}}
onPutEnd={({error, status, data, info })=>{}}
onDeleteEnd={({error, status, data, info })=>{}}
leaveClean={true} // remove data from store on componentWillUnmount
localFirst={false} // fetch data from server only if we can found your data on local store
localOnly={false} // never fetch data from server, only find in store
autoRefresh={false} // Fetch data after each create/update/delete doc
dataHandler={data => data} // Function to manipulate the data before set to store.
// Want to pass something to your component, add here
userName='Dan' // MyComponent will get this.props.userName
/>
- if the objectId is empty then use updateField and we save your inputs in the store, then you can use post method from your component and new doc will create for you in the server, the new doc id will be inside info
With FetchCollection
you can get list of document by collection name
import {FetchCollection} from 'react-parse'
....
<FetchCollection
schemaName='Post'
targetName='LastPost'
component={MyComponent} // or user render={(props)=> <MyComponent ...props/>}
// optional:
keys=''
include=''
onFetchEnd={({error, status, data, info })=>{}}
onPostEnd={({error, status, data, info })=>{}}
onPutEnd={({error, status, data, info })=>{}}
onDeleteEnd={({error, status, data, info })=>{}}
leaveClean={true} // remove data from store on componentWillUnmount
localFirst={false} // fetch data from server only if we can found your data on local store
localOnly={false} // never fetch data from server, only find in store
autoRefresh={false} // Fetch data after each create/update/delete doc
query={object} // http://docs.parseplatform.org/rest/guide/#queries
order='' // default is '-createdAt', Specify a field to sort by
skip={12} // skip first 12 documents
limit={50} // limit query to 50 documents
enableCount={true} // return the amount of results in db
dataHandler={data => data} // Function to manipulate the data before set to store.
// Want to pass something to your component, add here
userName='Dan' // example
/>
With FetchCloudCode
you can get list of document by collection name
import {FetchCloudCode} from 'react-parse'
....
<FetchCloudCode
functionName='GetPosts'
params={object} // cloud code params
targetName='GetPostsCloud'
component={MyComponent} // or user render={(props)=> <MyComponent ...props/>}
// optional:
onFetchEnd={({error, status, data, info })=>{}}
leaveClean={true} // remove data from store on componentWillUnmount
localFirst={false} // fetch data from server only if we can found your data on local store
localOnly={false} // never fetch data from server, only find in store
dataHandler={data => data} // Function to manipulate the data before set to store.
// Want to pass something to your component, add here
userName='Dan' // example
/>
View to Your redux store: we use immutable-js and reselect
parse:{
collections: {
myProducts: {
status: 'FETCH_FINISHED',
error: null,
loading: false,
data: [....],
info: {
schemaName : '',
query: {...},
skip: 0,
enableCount: false,
keys,
include,
order,
limit,
count,
timestamp
}
}
},
documents: {...},
cloudCodes: {...}
}
import {constants} from 'react-parse'
// FETCH
'FETCH_START','FETCH_FAILED','FETCH_FAILED_NETWORK','FETCH_FINISHED'
// POST
'POST_START','POST_FAILED','POST_FAILED_NETWORK','POST_FINISHED'
// DELETE
'DELETE_START','DELETE_FAILED','DELETE_FAILED_NETWORK','DELETE_FINISHED'
// PUT
'PUT_START','PUT_FAILED','PUT_FAILED_NETWORK','PUT_FINISHED'
First set the callbacks with setLoggerHandlers in each query your call back will run with => (type, action, status)
- type - one of ['CLOUD_CODE', 'GET', 'POST', 'PUT', 'DELETE']
- action- action object , you can use action.logger to custom call back behavior
- status - one of react-parse status, you can find them in status enum
import {setLoggerHandlers} from 'react-parse'
setLoggerHandlers({
onSuccess: (type, action, status) => {
console.log('Send notification or something else:', type, action, status)
},
onError: (type, action, status) => {
console.log('Send notification or something else:', type, action, status)
}
})
need a global loader?
import {ShowLoader} from 'react-parse'
class MyComponent extends React.Component {
.....
render() {
return (
<ShowLoader render={(isLoading) => {
isLoading ? <YourLoader /> : null
}}/>
)
You can help improving this project sending PRs and helping with issues.