prescottprue / redux-firestore Goto Github PK
View Code? Open in Web Editor NEWRedux bindings for Firestore
License: MIT License
Redux bindings for Firestore
License: MIT License
Do you want to request a feature or report a bug?
bug
What is the current behavior?
When received action @@reduxFirestore/LISTENER_RESPONSE
, the doc was already loaded and storeAs
is set, only data
got updated, not ordered
.
What is the expected behavior?
Expect both ordered
and data
to be updated.
Which versions of dependencies, and which browser are affected by this issue? Did this work in previous versions or setups?
redux-firestore@^0.5:
version "0.5.0"
react-redux-firebase@^2.1:
version "2.1.0"
Steps to reproduce and if possible a minimal demo of the problem via codesandbox or similar.
Listener setup:
collection(pin): "discussions"
doc(pin): "5aed4e0740133e2af516db07"
storeAs(pin): "discussionById_5aed4e0740133e2af516db07"
Received action:
{
type: '@@reduxFirestore/LISTENER_RESPONSE',
meta: {
collection: 'discussions',
doc: '5aed4e0740133e2af516db07',
storeAs: 'discussionById_5aed4e0740133e2af516db07'
},
payload: {
data: {
'5aed4e0740133e2af516db07': {
text: '123',
id: '5aed4e0740133e2af516db07',
}
},
ordered: [
{
id: '5aed4e0740133e2af516db07',
text: '123',
}
]
},
merge: {}
}
RFF config:
userProfile: 'users',
attachAuthIsReady: true,
presence: false,
useFirestoreForProfile: true,
logListenerError: true,
oneListenerPerPath: true,
enableLogging: true,
Failing test
it.only('updates doc under storeAs', () => {
action = {
type: actionTypes.LISTENER_RESPONSE,
meta: {
collection: 'testing',
doc: '123abc',
storeAs: 'pathName',
},
payload: {
ordered: [
{
content: 'new',
},
],
},
merge: {},
};
state = {
pathName: [
{
id: '123abc',
content: 'old',
},
],
};
expect(orderedReducer(state, action)).to.have.nested.property(
`pathName.0.content`,
'new',
);
});
Traced the codebase and it seems to have originated from somewhere around setListener
at https://github.com/prescottprue/redux-firestore/blob/master/src/actions/firestore.js#L173.
Say I'm querying for a doc bar
inside the foo
collection. The snapshot returned by the Firestore reference would be a DocumentSnapshot
instead of QuerySnapshot
, meaning it would not have a .forEach()
and would return null
in dataByIdSnapshot
or orderedFromSnap
Not sure if I'm missing something here. Instead of using firebase
I used @firebase/app
and @firebase/firestore
for their separate ES bundles and also react-redux-firebase
. Docs in Firestore have pointed to expecting a DocumentSnapshot
instead of QuerySnapshot
though.
For some reason, installing redux-firestore
will run npm run build
immediately after installation. That results in the failure of the installation. I was trying to install it in a create-react-app project, and there was already a build script in my package.json. I temporarily removed that script from my package.json, and the install was successful. So I think that there's some sort of interference between the build script that redux-firestore
calls, and the one that exists in the root project's package.json.
The 'storeAs' property does not appear to be implement in redux-firestore. It would be very helpful if was supported.
firestore.delete correctly removes the item from the firestore database but not from redux store. ( I do have a listener, firestore.add works great)
I experience issues when fetching data with the get operator.
Works seamlessly when adding data to Firestore though.
Tested on master
and v0.1.0-alpha.2
– using react-redux-firebase
as the base, but since they have made redux-firestore
optional it's a combination of the two.
Uncaught (in promise) TypeError: Cannot read property 'collection' of undefined
Any idea why?
rootcollection
doc1
subcollection11
subdoc1
subdoc2
doc2
subcollection21
import { getFirestore } from 'redux-firestore';
getFirestore().get('/rootcollection') or getFirestore().setListeners('/rootcollection')
But it did not give me any data on subcollection level.
Do i need to handle the subscription myself on client level? Or is there a better way?
Do you want to request a feature or report a bug?
Bug
What is the current behavior?
When I try to update a document within a subcollection, the change is performed on the subcollection, not the document itself.
The update statement:
this.props.firestore.update(`/artists/${this.props.artistId}/flights/${id}`, changes);
The @@reduxFirestore/UPDATE_REQUEST
action object:
{
meta: {
collection: 'artists',
doc: 'some-artist-id',
subcollection: 'flights',
other: ['some-flight-id']
}
payload: {
args: [
...changes....
]
}
}
What is the expected behavior?
I would expect the document within the subcollection to be updated, not the subcollection itself.
Which versions of dependencies, and which browser are affected by this issue? Did this work in previous versions or setups?
redux: 3.7.2
redux-firestore: 0.2.5
react-redux: 5.0.6
react-redux-firebase: 2.0.0-rc.2
Do you want to request a feature or report a bug?
Bug
What is the current behavior?
When calling delete
:
this.props.firestore.delete(`feeds/${this.props.auth.uid}/questions/${this.state.currentQuestion.id}`);
I see the action being fired with the correct payload:
And I see the data
reducer showing null
for the deleted item(s), but the ordered
reducer still contains the deleted item(s):
What is the expected behavior?
Calling delete should remove items from both the data
and ordered
reducers.
Which versions of dependencies, and which browser are affected by this issue? Did this work in previous versions or setups?
"react": "16.3.1",
"react-native": "0.55.3",
"react-native-firebase": "^4.0.4",
"react-redux": "^5.0.7",
"react-redux-firebase": "^2.1.1",
"redux": "^4.0.0",
"redux-firestore": "^0.5.1",
Steps to reproduce and if possible a minimal demo of the problem via codesandbox or similar.
The screenshot below should mostly explain it:
Basically, entries in the database are getting added at "users/USERID/USERID" -- instead of just "users/USERID". (ignore the correctly-added entry -- that is from a retrieval of the collection as a whole, which adds entries correctly without the extra wrapper)
I haven't yet determined what is causing the above issue to occur. It might be that I'm using the library incorrectly somewhere.
I will look into it, and find out what is causing the incorrect paths. Figured I would make an issue for it already, though, since the output above is still incorrect -- if from misuse, there should still probably be a catch/warning for it. (at the moment, it just happens silently)
Add startAfter, startAt, endAfter, endAt query methods to the reference building.
Docs: https://firebase.google.com/docs/firestore/query-data/query-cursors
redux-firestore/src/utils/query.js
Line 38 in ba627c0
If I pass in an array to orderBy today like orderBy:['timestamp', 'desc'], it orders using 'timestamp' and 'desc' as fields. Need a way to specify the direction for each of the fields
In one of our components we are querying a subcollection like this:
firestoreConnect((props) => {
const { userId } = props;
if (props.userId) {
return [
{
collection: 'stripeCustomers',
doc: userId,
subcollections: [{ collection: 'sources' }],
storeAs: 'stripeSources',
},
{
collection: 'stripeCustomers',
doc: userId,
subcollections: [{ collection: 'charges' }],
storeAs: 'stripeCharges',
},
];
}
return [];
})
When starting the app, this always shows 2 warnings:
Listener does not exist for stripeCustomers/someUserId/sources
Listener does not exist for stripeCustomers/someUserId/charges
I looked at the code that generates these 2 errors, but was unable to understand whether this is a correct or incorrect warning, as it seems like the listener is not registered initially, and then the detachListener function is run for some reason?
redux-firestore/src/utils/query.js
Line 178 in 05159d1
In utils/query.js when applying the where
this code is setting newRef to the last where:
forEach(where, (whereArgs) => {
if (!isArray(whereArgs)) {
throw new Error(
'Where currently only supports arrays. Each option must be an Array of arguments to pass to where.',
);
}
newRef = whereArgs.length > 1 ? ref.where(...whereArgs) : ref.where(whereArgs);
}
I've tested a solution using reduce which I believe fixes this issue:
where.reduce((acc, whereArgs) => {
if (!isArray(whereArgs)) {
throw new Error(
'Where currently only supports arrays. Each option must be an Array of arguments to pass to where.',
);
}
return whereArgs.length > 1 ? acc.where(...whereArgs) : acc.where(whereArgs);
}, ref);
I think this is a bug or a documentation error. Current running [email protected]
.
The firestore.update
example in the README.md is throwing the following error for me:
TypeError: Cannot read property 'apply' of undefined
wrapInDispatch
node_modules/redux-firestore/es/utils/actions.js:47
44 | meta: meta,
45 | payload: (0, _isObject3.default)(requestingType) ? requestingType.payload : { args: args }
46 | });
> 47 | var methodPromise = args && args.length ? ref[method].apply(ref, _toConsumableArray(args)) : ref[method]();
48 | return methodPromise.then(function (val) {
49 | var makePayload = function makePayload(_ref2) {
50 | var payload = _ref2.payload;
It is unclear if there is another method I should be using for updating records.
Do you want to request a feature or report a bug?
Bug
What is the current behavior?
I'm using the following listener configuration for syncing a subcollection:
export default compose(
firestoreConnect(props => [
{
collection: 'artists',
doc: props.artistId,
subcollections: [
{
collection: 'flights',
orderBy: ['departureMoment'],
},
],
storeAs: 'flights',
},
]),
connect(({ firestore }) => {
return {
flights: firestore.ordered.flights || [],
};
}),
)(FlightPage);
The resulting firestore object looks like this:
{
data: {
flights: {
fnEPGX7kGPicCInJkDO3: {...document 1...},
llOt1wbuTGNMpTHCaurr: {...document 2...}
}
},
ordered: {
flights: []
}
}
The ordered
result is an empty array, but the data
result contains the correct documents.
When I inspect the corresponding @@reduxFirestore/LISTENER_RESPONSE
action with redux-logger
, it looks like this:
{
meta: {...},
payload: {
data: {
fnEPGX7kGPicCInJkDO3: {...document 1...},
llOt1wbuTGNMpTHCaurr: {...document 2...}
}
ordered: [
{...document 1...},
{...document 2...}
]
}
}
The action payload looks correct. However, the ordered data is not getting mapped correctly.
What is the expected behavior?
I would expect the ordered
result to contain the same documents as the data
object, but then in an ordered array. Now, the ordered
array is empty.
Which versions of dependencies, and which browser are affected by this issue? Did this work in previous versions or setups?
redux: 3.7.2
redux-firestore: 0.2.5
react-redux: 5.0.6
react-redux-firebase: 2.0.0-rc.2
suppose we have the following data schema:
root collection: todos
{
title: String,
completed: Boolean,
todo_items: SubCollection
}
Therefore the path to todo_items of a collection with the ID: 6mjAkNg3XvB3v55LDIjy, will be: todos/6mjAkNg3XvB3v55LDIjy/todo_items
.
When we have the following 2 firestoreConnect()
s simultaneously, we are put in an awkward situation.
firestoreConnect(['/todos'])
firestoreConnect(['/todos/6mjAkNg3XvB3v55LDIjy/todo_items'])
In this situation, both of these connections try to store the collections under the same key: todos
. Under firestore.data
, they are conveniently nested. Therefore, a user can store subcollections of a document under the same key, without having to look for it somewhere else. This is actually really really cool.
The problem is under firestore.ordered
. Once the subcollection is added, firestore.ordered
loses the ordered list invariant. The data-structure becomes an array-object hybrid, and renders firestore.ordered
unusable.
Do you want to request a feature or report a bug?
Not sure if this is intentional or not though, but inconsistent to rely on I find. Happy to make a PR to correct them — just needs to double check to see if this is a bug or not.
What is the current behavior?
Consider this action:
{
type: '@@reduxFirestore/LISTENER_RESPONSE',
meta: {
collection: 'group',
doc: 'uJH3akkXRkje3ruPZ7au',
subcollections: [
{
collection: 'userAccess',
doc: 'nonexistent'
}
],
storeAs: 'group/uJH3akkXRkje3ruPZ7au/userAccess/'
},
payload: {
data: null,
ordered: []
}
}
Will result in the store being updated as:
{
firestore: {
ordered: {
group/uJH3akkXRkje3ruPZ7au/userAccess/: []
}
}
}
Which is supposedly inconsistent with how the store's firestore.data
gets updated, and the action payload being incorrect based on the docs of the orderedFromSnap()
return type, which is Array|null
.
What is the expected behavior?
The action.payload
should be:
payload: {
data: null,
ordered: null
}
And the store's firestore.data
should have an entry of group/uJH3akkXRkje3ruPZ7au/userAccess/
as null
instead of undefined
and that part of the store not being updated. This way the isLoaded
check from react-redux-firebase
can rely on the behavior of firestore.data
on that part.
Which versions of dependencies, and which browser are affected by this issue? Did this work in previous versions or setups?
Running redux-firestore
0.2.5
.
Steps to reproduce and if possible a minimal demo of the problem via codesandbox or similar.
Query an endpoint that will return null
as the payload data. In my case it was a nonexistent document in a collection.
Do you want to request a feature or report a bug?
feature
What is the current behavior?
No enablePersistence option
What is the expected behavior?
enablePersistence option is available
Here is the docs
https://firebase.google.com/docs/firestore/manage-data/enable-offline?authuser=0
I havedn't dived into too much how it works but may need to populate the state based on the cache somehow?
Do you want to request a feature or report a bug?
BUG
What is the current behavior?
example complete fails to run/build
What is the expected behavior?
Run/build example complete
Which versions of dependencies, and which browser are affected by this issue? Did this work in previous versions or setups?
I have yarn 1.4.0, did not change any of the package.json, but got, when running yarn
:
Please choose a version of "react-redux-firebase" from this list: (Use arrow k
eys)
❯ 2.1.1
2.1.0
2.0.7-alpha
2.0.6
2.0.5
2.0.4
2.0.3
I chose the latest 2.1.1
Then
warning codecov > request > [email protected]: Use uuid module instead
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
warning "firebase > @firebase/[email protected]" has unmet peer dependency "@firebase/[email protected]".
warning "firebase > @firebase/[email protected]" has unmet peer dependency "@firebase/[email protected]".
warning "firebase > @firebase/[email protected]" has unmet peer dependency "@firebase/[email protected]".
warning "firebase > @firebase/[email protected]" has unmet peer dependency "@firebase/[email protected]".
warning "firebase > @firebase/[email protected]" has unmet peer dependency "@firebase/[email protected]".
warning "firebase > @firebase/functions > @firebase/[email protected]" has unmet peer dependency "@firebase/[email protected]".
warning "firebase > @firebase/firestore > @firebase/[email protected]" has unmet peer dependency "@firebase/[email protected]".
warning "firebase > @firebase/database > @firebase/[email protected]" has unmet peer dependency "@firebase/[email protected]".
warning "firebase > @firebase/auth > @firebase/[email protected]" has unmet peer dependency "@firebase/[email protected]".
warning "firebase > @firebase/storage > @firebase/[email protected]" has unmet peer dependency "@firebase/[email protected]".
And then when running yarn start
:
Steps to reproduce and if possible a minimal demo of the problem via codesandbox or similar.
Do you want to request a feature or report a bug?
bug
What is the current behavior?
When a document gets updated and the DOCUMENT_MODIFIED is triggered it isn't merging the data correctly in the data reducer.
What is the expected behavior?
We have a listener on companies/{companyid}/users
When a user object gets changed a DOCUMENT_MODIFIED action gets dispatched, but instead of merging the new user inside of companies/{companyid}/users/{userid} -> the document is being inserted in /companies/{userId}
Which versions of dependencies, and which browser are affected by this issue? Did this work in previous versions or setups?
I'm using 0.4.2, but I see that the document_modified hasn't changed in 0.4.3
I updated from 0.3.2 to 0.4.1 for the on deletion fix for the dataReducer however it appears to no longer push the new document to the store.
I can see that the document is successfully created in my firestore dashboard but I receive no new props, I do receive new props on document deletion and modification just not creation.
If I switch to the orderedReducer then it works as expected, it's also working perfectly fine with 0.3.2 which I have now reverted to.
I've been using Firebase realtime database in my react-native app using react-redix-firebase
and am switching to Firestore from RD. I have set the following for my reduxFirebase config:
const reduxFirebaseConfig = {
userProfile: 'users',
enableRedirectHandling: false,
useFirestoreForProfile: true
}
but I user data still isn't being put in firestore when I use firebase.updateProfile and there is no firestore.updateProfile - Am I missing something??
hello
Do you want to request a feature or report a bug?
feature
What is the current behavior?
data type
db.collection("posts").doc("QyJJKtQhNA2QeHFVqfCR") = {
content: String,
author: Reference // 'users/jRjjlMyTBENjvln3pQpGwKgdvAa2'
}
query
{ collection: 'posts', doc: postId }
result
{ content: '', author: DocumentReference }
A DocumentReference refers to a document location in a Firestore database and can be used to write, read, or listen to the location. The document at the referenced location may or may not exist. A DocumentReference can also be used to create a CollectionReference to a subcollection.
What is the expected behavior?
{ content: '', author: { displayName: '', avatarUrl: '' } }
Do you want to request a feature or report a bug?
BUG - code added in 0.5.1
to enable other methods such as batch
cased performance degredation
What is the current behavior?
All methods on firebase.firestore()
are available on the store.firestore
instance, but this causes performance issues if firestore is passed as a prop (as it is with withFirestore
and firestoreConnect
What is the expected behavior?
Access to these methods should not impact performance of components that get firestore
from store
Which versions of dependencies, and which browser are affected by this issue? Did this work in previous versions or setups?
v0.5.1
caused it0.5.0
and earlier do not have this issueSteps to reproduce and if possible a minimal demo of the problem via codesandbox or similar.
Do you want to request a feature or report a bug?
Bug
What is the current behavior?
Context:
Firstly, set listener { collection: 'book', limit: 3}
Later, set listener { collection: 'book', limit: 6}
Currently, the listener won't be updated. It remains to be { collection: 'book', limit: 3}
. It also does not trigger the second query at all.
That's because limit
is ignored when constructing listener name, code:
redux-firestore/src/utils/query.js
Line 163 in b394053
What is the expected behavior?
Expect it will trigger the second query. Either the listener will be updated to the most recent query { collection: 'book', limit: 6}
or there will be two listeners.
Which versions of dependencies, and which browser are affected by this issue? Did this work in previous versions or setups?
v0.4.3
Steps to reproduce and if possible a minimal demo of the problem via codesandbox or similar.
As mentioned above.
I'm trying to get a basic working example using create-react-app
, redux-firestore
and react-redux-firebase
. I've followed the Firestore Getting Started instructions and am getting the following error when viewing my app:
Error: Listeners must be an Array of listener configs (Strings/Objects)
on
ReactDOM.render(<AppContainer />, document.getElementById('root'))
where <AppContainer />
is:
const AppContainer = () => (
<Provider store={store}>
<App />
</Provider>
);
and <App />
is a firestoreConnect
HOC using:
export default compose(
firestoreConnect({ collection: 'todos' }),
connect((state, props) => ({
todos: state.firestore.ordered.todos
}))
)(App)
Full repo available at - https://github.com/brettdewoody/react-redux-firestore.
Here's the full error stack:
firestore.js:130 Uncaught Error: Listeners must be an Array of listener configs (Strings/Objects)
at Object.setListeners (firestore.js:130)
at Object.setListeners (actions.js:76)
at FirestoreConnect.componentWillMount (firestoreConnect.js:73)
at callComponentWillMount (react-dom.development.js:6370)
at mountClassInstance (react-dom.development.js:6435)
at updateClassComponent (react-dom.development.js:7840)
at beginWork (react-dom.development.js:8225)
at performUnitOfWork (react-dom.development.js:10224)
at workLoop (react-dom.development.js:10288)
at HTMLUnknownElement.callCallback (react-dom.development.js:542)
at Object.invokeGuardedCallbackDev (react-dom.development.js:581)
at invokeGuardedCallback (react-dom.development.js:438)
at renderRoot (react-dom.development.js:10366)
at performWorkOnRoot (react-dom.development.js:11014)
at performWork (react-dom.development.js:10967)
at requestWork (react-dom.development.js:10878)
at scheduleWorkImpl (react-dom.development.js:10732)
at scheduleWork (react-dom.development.js:10689)
at scheduleTopLevelUpdate (react-dom.development.js:11193)
at Object.updateContainer (react-dom.development.js:11231)
at react-dom.development.js:15226
at Object.unbatchedUpdates (react-dom.development.js:11102)
at renderSubtreeIntoContainer (react-dom.development.js:15225)
at Object.render (react-dom.development.js:15290)
at Object../src/index.js (index.js:56)
at __webpack_require__ (bootstrap 64dbecc80b6a9be06bf0:678)
at fn (bootstrap 64dbecc80b6a9be06bf0:88)
at Object.0 (registerServiceWorker.js:117)
at __webpack_require__ (bootstrap 64dbecc80b6a9be06bf0:678)
at ./node_modules/@firebase/app/dist/esm/index.js.Object.defineProperty.value (bootstrap 64dbecc80b6a9be06bf0:724)
at bootstrap 64dbecc80b6a9be06bf0:724
setListeners @ firestore.js:130
(anonymous) @ actions.js:76
componentWillMount @ firestoreConnect.js:73
callComponentWillMount @ react-dom.development.js:6370
mountClassInstance @ react-dom.development.js:6435
updateClassComponent @ react-dom.development.js:7840
beginWork @ react-dom.development.js:8225
performUnitOfWork @ react-dom.development.js:10224
workLoop @ react-dom.development.js:10288
callCallback @ react-dom.development.js:542
invokeGuardedCallbackDev @ react-dom.development.js:581
invokeGuardedCallback @ react-dom.development.js:438
renderRoot @ react-dom.development.js:10366
performWorkOnRoot @ react-dom.development.js:11014
performWork @ react-dom.development.js:10967
requestWork @ react-dom.development.js:10878
scheduleWorkImpl @ react-dom.development.js:10732
scheduleWork @ react-dom.development.js:10689
scheduleTopLevelUpdate @ react-dom.development.js:11193
updateContainer @ react-dom.development.js:11231
(anonymous) @ react-dom.development.js:15226
unbatchedUpdates @ react-dom.development.js:11102
renderSubtreeIntoContainer @ react-dom.development.js:15225
render @ react-dom.development.js:15290
./src/index.js @ index.js:56
__webpack_require__ @ bootstrap 64dbecc80b6a9be06bf0:678
fn @ bootstrap 64dbecc80b6a9be06bf0:88
0 @ registerServiceWorker.js:117
__webpack_require__ @ bootstrap 64dbecc80b6a9be06bf0:678
./node_modules/@firebase/app/dist/esm/index.js.Object.defineProperty.value @ bootstrap 64dbecc80b6a9be06bf0:724
(anonymous) @ bootstrap 64dbecc80b6a9be06bf0:724
index.js:2178 The above error occurred in the <FirestoreConnect(Connect(App))> component:
in FirestoreConnect(Connect(App)) (at index.js:52)
in Provider (at index.js:51)
in AppContainer (at index.js:56)
Do you have any thought about making populate feature for this like in react-redux-firebase ?
While subcollection is good but based on the documentation said:
Limitations: You can't easily delete subcollections, or perform compound queries across subcollections.
Well if you want me to help i have some sample to make this work that i take from your pupulate.js file in react-redux-firebase with some additional features like:
Just let me know if you're interested.
I need access to FieldValue. How can I make this work?
const {firestore} = this.props
firestore.update({
collection: 'userRegistrations',
doc: documentId,
{
isLocked: true,
lock: {
owner: auth.uid,
timestamp: firestore.FieldValue.serverTimestamp(),
},
}
});
I can get it by importing firebase at the top of my file, and get it from there, but that seems a bit silly with the instance on props. And it would be easy to make a mistake with shadowing it.
Do you want to request a feature or report a bug?
Bug
What is the current behavior?
Trying to get a subcollection produces the error:
Error: Collection can only be run on a document. Check that query config for subcollection: "details" contains a doc parameter.
What is the expected behavior?
The subcollection is retrieved
Which versions of dependencies, and which browser are affected by this issue? Did this work in previous versions or setups?
Current version, haven't used previous versions
Steps to reproduce and if possible a minimal demo of the problem via codesandbox or similar.
Use the following code to reproduce. I have also tried adding a document parameter to subcollection object without success.
componentWillMount() {
const { firestore } = this.context.store;
firestore.get({
collection: 'users',
document: 'bob',
subcollections: [{ collection: 'details' }],
});
}
Do you want to request a feature or report a bug?
Bug
What is the current behavior?
Collection doesn't load, get an error in console.
What is the expected behavior?
Collection in my Firestore should be loaded.
Which versions of dependencies, and which browser are affected by this issue? Did this work in previous versions or setups?
I'm using latest (0.5.2) version in latest Chrome.
Steps to reproduce and if possible a minimal demo of the problem via codesandbox or similar.
Very simple so far:
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux'
import { compose } from 'recompose';
import { firestoreConnect } from 'react-redux-firebase'
function Main(props) {
console.log(props);
return (
<div>Cards go here</div>
)
}
Main.propTypes = {};
const enhance = compose(
firestoreConnect(['cards']),
connect((state) => ({
cards: state.firestore.ordered.cards,
}))
);
export default enhance(Main);
Cards
is undefined and I get the following error in console:
Uncaught Error: QuerySnapshot.docChanges has been changed from a property into a method, so usages like "querySnapshot.docChanges" should become "querySnapshot.docChanges()"
at new FirestoreError (index.cjs.js:346)
at throwDocChangesMethodError (index.cjs.js:17164)
at Function.get (index.cjs.js:17176)
at Object.next (firestore.js:164)
at next (index.cjs.js:16990)
at index.cjs.js:15021
I have a top-level cards
collection in my Firestore which has a few items in it, shouldn't be returning undefined. I'm guessing it's due to this error.
Here's the scenario. This is React code with a router and I have two components on two different pages doing:
firestoreConnect([
{ collection: 'group', doc: 'uJH3akkXRkje3ruPZ7au' },
{
collection: 'group',
doc: 'uJH3akkXRkje3ruPZ7au',
subcollections: [{ collection: 'objects' }],
},
]),
And the other one doing
firestoreConnect(['group'])
Whenever I go from the first component to the second component,firestoreConnect
on group
would shallow merge the specific doc and removing the subcollection information stored in there, both on dataReducer
and orderedReducer
.
I dont find any example on pagination with firestore. Any helps would be appreciated. Thanks
IT looks as though when a document updates through setListener(s)
the data I get back does not include any subcollections I have previously pulled.
loadData: ({ store, itemId }) => () =>
store.firestore
.get({
collection: "items",
doc: itemId,
subcollections: [{ collection: "additions" }],
})
.then(
store.firestore.setListener({
collection: "items",
doc: itemId,
subcollections: [{ collection: "additions" }],
}),
),
I have my redux connect listening to firestore.data.items[itemId].additions
I expected that when the listener updates the root item, it wouldn't clear out the additions
subcollection. However when I get data back from the listener, the additions
subcollection is missing.
Is this expected behavior, if so how should I work around it?
the following code throws the following error
firestore.add('/todos', { title: 'todosTitle' });
-->
FirebaseError: Function CollectionReference.doc() requires its first argument to be of type string, but it was: a custom Object object
So I think somewhere in the middle where we take the params and pass it to the internal method, we're messing something up.
Do you want to request a feature or report a bug?
Bug
What is the current behavior?
If you have an object within a document, then deleting keys from that object doesn't update the firestore.data
variable, however firestore.ordered
is updated. This means the if the component uses firestore.data
then the UI is not updated to reflect deleted keys. The database is correctly updated and refreshing the browser shows the expected values.
See https://codesandbox.io/s/m3jm3roko8 for an example.
In both 0.3.1
and <0.3.1
I can add an item and have it appear in the UI. The Redux diff looks like this for 0.3.1
and like this for 0.2.8
However when deleting items, 0.3.1
has this diff:
and 0.2.8
has this diff
Note that 0.3.1
only deletes the ordered
value, but leaves the data
value intact while 0.2.8
correctly deletes its data
value and doesn't set an ordered
value.
What is the expected behavior?
Values in firestore.data
are updated to reflect the database value when object properties are deleted. This occurs as expected prior to 0.3.1
.
Which versions of dependencies, and which browser are affected by this issue? Did this work in previous versions or setups?
See code sandbox
Steps to reproduce and if possible a minimal demo of the problem via codesandbox or similar.
https://codesandbox.io/s/m3jm3roko8
Hit the add and delete buttons. Notice that items are added correctly, but not removed when they are deleted. Hit refresh and the deleted items will go away.
It's a bit fiddly, but you can remove the redux-firestore
dep and change it to 0.2.8
then refresh to try with the working version, although it sometimes takes a few tries to change the version.
The database looks like this if you want to create your own.
❤️
Hi I am trying to use this component in combination with react-redux-firebase, but I did not get any data from my firestore. I am trying different things for one day now, but no luck yet. The authentication is working fine.
I also don't get how collections and documents are handled. In my case -Ktg8j9RjgIvUmCC1iGe references a document. Does it know which is a document or a collection automatically?
I try to use connect like this:
export default connect<StateFromProps, {}, void>(( state: any ) => (
{
auth: state.firebase.auth,
apartmentList: getVal(state.firestore, 'data/users/pLiT8PvTBgbERBwUe8xPByJBtVn1/apartmentList/-Ktg8j9RjgIvUmCC1iGe', 'init')
}))(
firestoreConnect(['/users/pLiT8PvTBgbERBwUe8xPByJBtVn1/apartmentList/-Ktg8j9RjgIvUmCC1iGe'])(
withStyles(styles)(App)
)
);
My setup looks like this:
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import './index.css';
import theme from './theme/theme';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { createStore, combineReducers } from 'redux';
import { firebaseStateReducer, firestoreReducer, reactReduxFirebase } from 'react-redux-firebase';
import 'firebase/firestore';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import { Provider } from 'react-redux';
import * as firebaseApp from 'firebase/app';
import * as firebase from 'firebase';
import { reduxFirestore } from 'redux-firestore';
const firebaseConfig = {
... here is my config...
};
const rrfConfig = {
userProfile: 'users',
useFirestoreForProfile: true
};
firebaseApp.initializeApp(firebaseConfig);
firebaseApp.firestore();
const createStoreWithFirebase = reduxFirestore(firebaseApp, {})(
reactReduxFirebase(firebase, rrfConfig)(createStore)
);
// Add Firebase to reducers
const rootReducer = combineReducers({
firebase: firebaseStateReducer,
firestore: firestoreReducer
});
// Create store with reducers and initial state
const store = createStoreWithFirebase(rootReducer, {});
ReactDOM.render(
<MuiThemeProvider theme={theme}>
<Provider store={store}>
<App/>
</Provider>
</MuiThemeProvider>,
document.getElementById('root') as HTMLElement
);
registerServiceWorker();
Do you want to request a feature or report a bug?
Bug
What is the current behavior?
My query return expected results (but not ordered) without the orberBy
and return an empty result with the orberBy
.
try {
const results = await firestore.get({
collection: 'groups',
where: [
['departureStation.id', '==', departureStationId],
['arrivalStation.id', '==', arrivalStationId],
['dateTime', '>=', startDate.toDate()],
['dateTime', '<=', endDate.toDate()],
],
orderBy: ['dateTime', 'desc'],
});
console.log(results); // Return no result (results.empty === true)
} catch (err) {
console.log(err);
}
But without, I have expected results:
try {
const results = await firestore.get({
collection: 'groups',
where: [
['departureStation.id', '==', departureStationId],
['arrivalStation.id', '==', arrivalStationId],
['dateTime', '>=', startDate.toDate()],
['dateTime', '<=', endDate.toDate()],
],
// orderBy: ['dateTime', 'desc'],
});
console.log(results); // Return expected results (results.empty === false)
} catch (err) {
console.log(err);
}
What is the expected behavior?
Unless i'm mistaken, the orderBy
should not affect the number of retrieved results but only their orders.
I do not know if there is a connection with #46.
Which versions of dependencies, and which browser are affected by this issue? Did this work in previous versions or setups?
{
"firebase": "^4.8.2",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-redux": "^5.0.6",
"react-redux-firebase": "^2.0.1",
"redux": "^3.7.2",
"redux-firestore": "^0.2.5",
}
All browsers seems to be affected.
Thanks a lot for your help :)
Check out https://github.com/prescottprue/redux-firestore/blob/master/src/enhancer.js#L61
exports.default = function (firebaseInstance, otherConfig) {
return function (next) {
return function (reducer, initialState, middleware) {
var store = next(reducer, initialState, middleware);
var configs = _extends({}, _constants.defaultConfig, otherConfig);
firestoreInstance = (0, _createFirestoreInstance2.default)(firebaseInstance.firebase_ || firebaseInstance, configs, store.dispatch);
store.firestore = firebaseInstance;
return store;
};
};
};
Notice how store.firestore
is set to firebaseInstance
. This has been the issue of why setListener
was not available in store.firestore
when using firestoreConnect
.
Let's say we have the following schema:
{
title: String,
completed: Boolean,
todo_items: SubCollection
}
Let's add the following firestoreConnect(['/todos'])
This will set store.firestore.data.todos
to something like the following:
{
'askldaskdadm123': {
title: 'First todos list',
},
'omfnerfjknn103': {
title: 'Second todos list',
},
}
Now let's add the following: firestoreConnect(['/todos/6mjAkNg3XvB3v55LDIjy/todo_items'])
This will add the todo_items
key to every todos list under store.firestore.data.todos
, making it look like the following:
{
'askldaskdadm123': {
title: 'First todos list',
todo_items: {
'k3j2n42304': {
title: 'first item under first list',
completed: false,
},
},
},
'omfnerfjknn103': {
title: 'Second todos list',
todo_items: .....
},
}
This is extremely convenient, but the data-structure will break when we update a todos list on the document level.
If we update the title of the second todos list to Something else
, it will lose its todo_items, making store.firestore.data.todos
look like the following:
{
'askldaskdadm123': {
title: 'First todos list',
todo_items: {
'k3j2n42304': {
title: 'first item under first list',
completed: false,
},
},
},
'omfnerfjknn103': {
title: 'Something else',
},
}
This is probably a reducer bug. When the snapshot of the todos list with an id: todosListId
is received, I believe the reducer will automatically set store.firestore.todos[todosListId]
to the value of that todos list, which will effectively overwrite the subcollections.
Instead, maybe we should first check if there's already some data in there, and then use the spread operator to only update with the new data.
I've been updating a project of mine (which uses react-redux-firebase) from firebase to firestore.
So far so good. I've got the sign in system working, and have the data querying code working fine. (as far as I've tested anyway)
I'm now trying to reimplement the data saving/storing code. Because I prefer the direct route for storing data rather than the redux "action" system, I'm using code like this:
store.firebase.firestore().collection("users").add({
first: "Ada",
last: "Lovelace",
born: 1815
}).then(()=>console.log("Done")).catch(err=>console.log("Error: " + err))
The code above works perfectly when I am not signed in. When I'm signed in, however, the code snippet does nothing. It just returns a promise which never completes.
If I sign back out, it starts working again. If I sign back in, it stops working.
Any idea what could be causing these direct calls to fail?
Do you want to request a feature or report a bug?
What is the current behavior?
What is the expected behavior?
Which versions of dependencies, and which browser are affected by this issue? Did this work in previous versions or setups?
Steps to reproduce and if possible a minimal demo of the problem via codesandbox or similar.
Do you want to request a feature or report a bug?
feature
What is the current behavior?
No functions for transactions and batched writes
https://firebase.google.com/docs/firestore/manage-data/transactions?authuser=0
Do you want to request a feature or report a bug?
Bug - Subcollections of subcollections not working on v0.3.*
compose(
firestoreConnect((props) => {
return [
{
collection: 'cities',
doc: 'SF',
subcollections: [
{
collection: 'zipcodes',
doc: '123456',
subcollections: [{collection: 'measurements', orderBy: ['date', 'desc'], limit: 1}],
},
],
},
];
}),
connect((state, props) => {
return {
client: get(state, 'firestore.data.cities.SF.zipcodes.123456'),
};
})
)
What is the current behavior?
Throws
"Error: Collection can only be run on a document. Check that query config for subcollection "otherThings" contains a doc parameter"
What is the expected behavior?
Which versions of dependencies, and which browser are affected by this issue? Did this work in previous versions or setups?
0.2.*
- Works as expectedv0.3.*
- Throws"Error: Collection can only be run on a document. Check that query config for subcollection "otherThings" contains a doc parameter"
Steps to reproduce and if possible a minimal demo of the problem via codesandbox or similar.
Do you want to request a feature or report a bug?
Reporting a bug
What is the current behavior?
Exception is thrown during compilation
What is the expected behavior?
A proper reducer is being created
Which versions of dependencies, and which browser are affected by this issue? Did this work in previous versions or setups?
0.3.2
Steps to reproduce and if possible a minimal demo of the problem via codesandbox or similar.
Having reducer as follows:
import { Reducer, combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';
import { firebaseReducer } from 'react-redux-firebase';
import { firestoreReducer } from 'redux-firestore';
const reducers: Reducer<ApplicationState> = combineReducers<ApplicationState>({
firebase: firebaseReducer,
firestore: firestoreReducer,
router: routerReducer
});
export { reducers };
This throws compilation error because of firestoreReducer:
Argument of type '{ firebase: typeof firebaseReducer; firestore: typeof firestoreReducer; router: Reducer<RouterSta...' is not assignable to parameter of type 'ReducersMapObject'.
Property 'firestore' is incompatible with index signature.
Type 'typeof firestoreReducer' is not assignable to type 'Reducer<any>'.
Type 'typeof firestoreReducer' provides no match for the signature '(state: any, action: AnyAction): any'.
Casting firebaseReducer as follows will fix it:
const reducers: Reducer<ApplicationState> = combineReducers<ApplicationState>({
firebase: firebaseReducer,
firestore: firestoreReducer as Reducer<ApplicationState>,
router: routerReducer
});
Do you want to request a feature or report a bug?
Bug
What is the current behavior?
I'm trying to request a collection and a subcollection:
{
collection: 'companies', doc: company,
subcollections: [{ collection: 'users' }]
}
What is the expected behavior?
the expected behavior is to receive the doc + a subcollection
Instead the subcollection overrides all properties of the doc. So one ends only with the subcollection data.
I couldn't setup the library to start experimenting, because I think the README is incomplete.
redux-firestore
isn't even imported.firestoreReducer
, but redux-firestore
does not have an export named firestoreReducer
, it has one named firebaseStateReducer
. This creates further confusion, because the reducer export of the original react-redux-firestore
is also named firebaseStateReducer
Do you want to request a feature or report a bug?
Bug
What is the current behavior?
We have 3 filtered views. When the page loads the user is presented with the first tab where we are filtering on state == 0 and we have a pagination.
The user is able to change the state to 1, then the UI should update and the item should be removed.
We use the update function and we are seeing 2 actions.
UPDATE_REQUEST
UPDATE_SUCCESS
the arguments for update_success show state == -1, but the actual data state doesn't change.
Once we get the UPDATE_SUCCESS a LISTENER_RESPONSE is dispatched and we get new items for the list. The problem here is that since our listener looks only for state == 0 and our changed item has state 1 - it's no longer in the LISTENER_RESPONSE and this item never gets modified in the state. So our UI still displays it.
What is the expected behavior?
UPDATE_SUCCESS - should update the item in the data reducer.
I looked at the code and see that you don't use UPDATE_SUCCESS in the data reducer? Why? Aren't we interested in single UPDATE_SUCCESS actions? Are we supposed to manually handle this in our reducers?
Atm it is not possible to add a limit clause to a query, correct?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.