firex-store
Advanced tools
If you use this npm, you can read or write firestore data, easilynpm install --save firex-store
others comming soon
Return values or state values bound to Firestore has docId(documentId in Firestore) property.
A store module cannot subscribe to more than one 'collection' and 'document'
If you'd like to subscribe again after unsubscribing 'collection', set the property of the store you'd like to subscribe to [] and then subscribe.
.....
firebase.initializeApp({
apiKey: [your firebase api key],
projectId: [your project id],
.....
})
export const firestore = firebase.firestore()
import { } from 'firex-store'method: firestoreMutations
parameters:
method: firestoreSubscribeAction
parameters:
class: FirestoreSubscriber
class methods:
Ex. Subscribe collection and document
import { firestoreMutations, firestoreSubscribeAction, FirestoreSubscriber } from 'firex-store'
// modules: comment
export default {
namespaced: true,
state: {
comments: [],
comment: null
},
mutations: {
...firestoreMutations('collection'),
...firestoreMutations('document')
// or `...firestoreMutations('all')`
},
actions: {
...firestoreSubscribeAction(
FirestoreSubscriber
.from(firebase.firestore().collection('/comments'))
.bindTo('comments') // property name in state
),
...firestoreSubscribeAction(
FirestoreSubscriber
.from(firebase.firestore().collection('/comments').doc('commentId'))
.bindTo('comment'), // property name in state,
{ actionName: 'subscribeComment' }
),
}
.....
}
<script>
import { actionTypes } from 'firex-store'
export default {
name: 'Comments',
created() {
this.$store.dispatch(`comment/${actionTypes.collection.SUBSCRIBE}`)
this.$store.dispatch(`comment/subscribeComment`) // subscribe: actionName you defined in part1
}
}
</script>
method: firestoreMutations
parameters:
class: FirestoreSubscriber
class methods:
Ex. Subscribe collection
import { firestoreMutations, firestoreSubscribeAction, FirestoreSubscriber } from 'firex-store'
// modules: comment
export default {
namespaced: true,
state: {
comments: []
},
mutations: {
...firestoreMutations('collection')
},
actions: {
subscribeAll: ({ state, commit }) => {
FirestoreSubscriber
.from(firebase.firestore().collection('/comments'))
.bindTo('comments')
.subscribe(state, commit)
}
}
.....
}
<script>
export default {
name: 'Comments',
created() {
this.$store.dispatch(`user/subscribeAll`)
}
}
</script>
Ex. Unsubscribe collection
method: firestoreUnsubscribeAction
argments:
class FirestoreUnsubscriber
class method:
import { firestoreMutations, firestoreSubscribeAction, firestoreUnsubscribeAction, FirestoreSubscriber, FirestoreUnsubscriber } from 'firex-store'
// modules: comment
export default {
namespaced: true,
state: {
comments: [],
comment: null
},
mutations: {
...firestoreMutations('all')
},
actions: {
...firestoreSubscribeAction(
FirestoreSubscriber
.from(firebase.firestore().collection('/comments'))
.bindTo('comments')
)
...firestoreSubscribeAction(
FirestoreSubscriber
.from(firebase.firestore().collection('/comments').doc('commentId'))
.bindTo('comment')
)
...firestoreUnsubscribeAction(
FirestoreUnsubscriber
.on('comments'),
{ type: 'collection' }
)
...firestoreUnsubscribeAction(
FirestoreUnsubscriber
.on('comment'),
{ type: 'document' }
)
}
.....
}
<script>
import { actionTypes } from 'firex-store'
export default {
name: 'Comments',
created() {
this.$store.dispatch(`comment/${actionTypes.collection.SUBSCRIBE}`)
this.$store.dispatch(`comment/${actionTypes.document.SUBSCRIBE}`)
this.$store.dispatch(`comment/${actionTypes.collection.UNSUBSCRIBE}`)
this.$store.dispatch(`comment/${actionTypes.document.UNSUBSCRIBE}`)
}
}
</script>
FirestoreUnsubscriberimport { firestoreMutations, firestoreSubscribeAction, FirestoreSubscriber, FirestoreUnsubscriber } from 'firex-store'
// modules: comment
export default {
namespaced: true,
state: {
comments: []
},
mutations: {
...firestoreMutations('collection')
},
actions: {
subscribeAll: ({ state, commit }) => {
FirestoreSubscriber
.from(firebase.firestore().collection('/comments'))
.bindTo('comments')
.subscribe(state, commit)
},
unsubscribeAll: ({ state }) => {
FirestoreUnsubscriber
.on('comments')
.unsubscribe(state)
}
}
.....
}
<script>
export default {
name: 'Comments',
created() {
this.$store.dispatch(`user/subscribeAll`)
this.$store.dispatch(`user/unsubscribeAll`)
}
}
</script>
FirestoreFinderEX. Call in Store Action, to fetch collection
import { FirestoreFinder } from 'firex-store'
export default {
namespaced: true,
state: {},
getters: {},
mutations: {},
actions: {
fetchComments: async ({ commit }) => {
const mapComment = (data) => ({ message: data.message, user: { firstName: data.user.first_name, familyName: data.user.family_name } })
const ref = firestore.collection('/comments')
const result = await FirestoreFinder
.from(ref)
.find({ mapper: mapComment })
commit(***, result)
}
}
}
FirestoreAdderEx.
import { FirestoreAdder } from 'firex-store'
export default {
namespaced: true,
state: {},
getters: {},
mutations: {},
actions: {
add: async (_, { data }) => {
const result = await FirestoreAdder.to(
firestore.collection('comments')
).add(data, { mapper, errorHandler, completionHandler })
if (typeof result !== 'string') {
// error process
// ...
}
}
}
}
FirestoreSetterUseCase: Call this if you wouldn't like to overwrite dataEx.
import { FirestoreSetter } from 'firex-store'
export default {
namespaced: true,
state: {},
getters: {},
mutations: {},
actions: {
set: async (_, { data }) => {
const result = await FirestoreSetter.to(
firestore.collection('comments').doc('commentId')
)
// .transaction() // <- comment out if you wanna use transaction
.set(data, { mapper, errorHandler, completionHandler })
if (typeof result !== 'undefined') {
// error process
// ...
}
}
}
}
FirestoreMergeSetterUseCase: Call this if you would like to overwrite data or add property to dataEx.
import { FirestoreMergeSetter } from 'firex-store'
export default {
namespaced: true,
state: {},
getters: {},
mutations: {},
actions: {
mergeSet: async (_, { data }) => {
const result = await FirestoreSetter.to(
firestore.collection('comments').doc('commentId')
)
// .transaction() // <- comment out if you wanna use transaction
.mergeSet(data, { mapper, errorHandler, completionHandler })
if (typeof result !== 'undefined') {
// error process
// ...
}
}
}
}
from: Method, factory of FirestoreSubscriber and FirestoreFinder
FirestoreReaderServiceFactory: Class, factory of FirestoreSubscriber and FirestoreFinder
parameter:
methods:
bindTo: return FirestoreSubscriber
once: return FirestoreFinder
import { firestoreMutations, from } from 'firex-store'
// modules: comment
export default {
namespaced: true,
state: {
comments: []
},
mutations: {
...firestoreMutations('collection')
},
actions: {
subscribeAll: ({ state, commit }) => {
from(firebase.firestore().collection('/comments'))
.bindTo('comments')
.subscribe(state, commit)
},
find: () => {
return from(firebase.firestore().collection('/comments').doc('commentId'))
.once()
.find()
}
}
.....
}
on: Method, return FirestoreUnsubscriber instance
import { firestoreMutations, from, on, firestoreUnsubscriber } from 'firex-store'
// modules: comment
export default {
namespaced: true,
state: {
comments: [],
comment: null
},
mutations: {
...firestoreMutations('collection')
},
actions: {
subscribeAll: ({ state, commit }) => {
from(firebase.firestore().collection('/comments'))
.bindTo('comments')
.subscribe(state, commit)
},
find: () => {
return from(firebase.firestore().collection('/comments').doc('commentId'))
.once()
.find()
},
unsubscribe: ({ state }) => {
on('comments').unsubscribe(state)
},
...firestoreUnsubscriber(
on('comment'),
{ type: 'document' }
)
}
.....
}
to: Method, return FirestoreAdder or FirestoreDocumentWriterFacade instance.
FirestoreDocumentWriterFacade: Class, facade of FirestoreSetter and FirestoreMergeSetter
parameter:
methods:
transaction: call this if you wanna transaction
set: set data to firestore
mergeSet: set data to firestore
import { to } from 'firex-store'
// modules: comment
export default {
namespaced: true,
state: {},
mutations: {},
actions: {
set: async ({ dispatch }, { data }) => {
await to(firestore.colleciton('comments').doc('commentId'))
.set(data)
},
mergeSet: async ({ dispatch }, { data }) => {
const errorHandler = (error) => {
dispatch(`error/OCCURED`, error, { root: true })
console.error(error)
return error
}
await to(firestore.colleciton('comments').doc('commentId'))
.transaction()
.mergeSet(data)
},
add: async ({ dispatch }, { data }) => {
const result = await to(firestore.colleciton('comments')).add(data)
if (typeof result === 'string') {
console.log(`documentId is ${result}`)
} else {
dispatch(`error/OCCURED`, result, { root: true })
}
},
}
.....
}
Options
mapper:
Subscribe case: State prop bound to Firestore or return values map to something if mapper definedSet or add case: Data which set or added to firestore map to something if mapper definederrorHandler
console.error(error) and return errorcompletionHandler
afterMutationCalled
FirestoreSubscriber and firestoreSubscribeAction only.notFoundHandler
FirestoreSubscriber and firestoreSubscribeAction only.Ex.
const mapUser = (data) => ({
id: data.id
name: data.name
.....
})
const errorHandler = (error) => {
console.error(`[App Name]: ${error}`)
}
const completionHandler = () => {
console.log('completed!')
}
const afterMutationCalled = (payload) => {
/**
* payload = {
* data: { docId: string | null, [key: string]: any },
* isLast: boolean,
* statePropName: string
* [key: string]: any
* }
* */
if (payload.isLast === false) {
commit('SET_LOADING', true)
} else if (payload.isLast === true) {
commit('SET_LOADING', false)
}
}
const notFoundHandler = (type, isAll) => {
console.log('not found')
}
import { firestoreMutations, from, to } from 'firex-store'
export default {
namespaced: true,
state: {
comments: [],
comment: null,
isLoading: false
},
mutations: {
...firestoreMutations('collection'),
SET_LOADING(state, isLoading) {
state.isLoading = isLoading
}
},
actions: {
subscribe: ({ state, commit }) => {
from(firestore.collection('/comments'))
.bindTo('comments')
.subscribe(state, commit, {
mapper: mapUser,
errorHandler,
completionHandler,
afterMutationCalled,
notFoundHandler
})
},
add: async (_, { data }) => {
await to(firestore.collection('/comments'))
.add(data, { mapper, errorHandler, completionHandler })
}
}
.....
}
FAQs
Subscribe and write firestore data, easily
The npm package firex-store receives a total of 2 weekly downloads. As such, firex-store popularity was classified as not popular.
We found that firex-store demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Opengrep continues building momentum with the alpha release of its Playground tool, demonstrating the project's rapid evolution just two months after its initial launch.
Security News
FSF files an amicus brief against Neo4j, defending the AGPL and warning against adding restrictive terms that undermine free software rights.
Research
Security News
Malicious PyPI package ‘set-utils’ steals Ethereum private keys by exfiltrating them through blockchain transactions via the Polygon RPC.