Discussion of all things Redux and Firebase (offical room of react-redux-firebase)
Let me ask the question differently: in the Redux Persist section of the doc (https://react-redux-firebase.com/docs/integrations/redux-persist.html) if I just added
import ‘firebase/firestore’ below import firebase from 'firebase/app’ would I be able to use firestore as the storage engine for redux-persist that way?
16 replies
Hi folks, I've just drained a day with a react-native error I'm getting in redux-firestore. I'd appreciate any help on this, and if we cannot fix it in a day or so, we're reverting all the redux-firebase integration I just worked so hard on.
The error we're seeing in both iOS and Android builds on Circle Fastlane is (view the full build here:
> Task :app:bundleReleaseJsAndAssets
error Unable to resolve module `babel-runtime/helpers/extends` from `node_modules/redux-firestore/lib/enhancer.js`: babel-runtime/helpers/extends could not be found within the project.
Error: Unable to resolve module `babel-runtime/helpers/extends` from `node_modules/redux-firestore/lib/enhancer.js`: babel-runtime/helpers/extends could not be found within the project.
If you are sure the module exists, try these steps:
If you are sure the module exists, try these steps:
1. Clear watchman watches: watchman watch-del-all
1. Clear watchman watches: watchman watch-del-all
2. Delete node_modules: rm -rf node_modules and run yarn install
2. Delete node_modules: rm -rf node_modules and run yarn install
3. Reset Metro's cache: yarn start --reset-cache
3. Reset Metro's cache: yarn start --reset-cache
4. Remove the cache: rm -rf /tmp/metro-*. Run CLI with --verbose flag for more details.
4. Remove the cache: rm -rf /tmp/metro-*
at ModuleResolver.resolveDependency (/home/circleci/mobile/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:186:15)
at ResolutionRequest.resolveDependency (/home/circleci/mobile/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)
at DependencyGraph.resolveDependency (/home/circleci/mobile/node_modules/metro/src/node-haste/DependencyGraph.js:287:16)
at Object.resolve (/home/circleci/mobile/node_modules/metro/src/lib/transformHelpers.js:267:42)
at dependencies.map.result (/home/circleci/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:434:31)
at Array.map (<anonymous>)
at resolveDependencies (/home/circleci/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:431:18)
at /home/circleci/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:275:33
at Generator.next (<anonymous>)
at asyncGeneratorStep (/home/circleci/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:87:24)
> Task :app:bundleReleaseJsAndAssets FAILED
FAILURE: Build failed with an exception.I followed the instructions with watchman del, rm -rf node_modules, etc. with no changes in this error. Here are the versions we're using:
npm ls --depth 0├── @babel/core@7.11.6
├── @babel/runtime@7.11.2
├── @react-native-community/async-storage@1.12.1
├── @react-native-community/datetimepicker@3.0.3
├── @react-native-community/eslint-config@2.0.0
├── @react-native-community/masked-view@0.1.10
├── @react-native-community/picker@1.7.0
├── @react-native-community/slider@3.0.3
├── @react-native-community/viewpager@4.1.6
├── @react-native-firebase/analytics@7.6.7
├── @react-native-firebase/app@8.4.5
├── @react-native-firebase/auth@9.3.0
├── @react-native-firebase/dynamic-links@7.5.9
├── @react-native-firebase/firestore@7.8.6
├── @react-native-firebase/functions@7.4.8
├── @react-native-firebase/messaging@7.9.0
├── @react-native-firebase/storage@7.4.9
├── @react-navigation/core@5.12.5
├── @react-navigation/material-top-tabs@5.2.19
├── @react-navigation/native@5.7.6
├── @react-navigation/stack@5.9.3
├── @segment/analytics-react-native@1.3.1
├── @types/jest@26.0.14
├── @types/lodash@4.14.162
├── @types/react@16.9.52
├── @types/react-instantsearch-native@6.3.0
├── @types/react-native@0.63.25
├── @types/react-native-vector-icons@6.4.6
├── @types/react-native-video@5.0.3
├── @types/react-redux@7.1.9
├── @types/react-test-renderer@16.9.3
├── @types/uuid@3.4.0
├── algoliasearch@4.5.1
├── babel-jest@26.5.2
├── eslint@7.11.0
├── eslint-config-airbnb@18.2.0
├── eslint-config-prettier@6.12.0
├── eslint-config-standard@14.1.1
├── eslint-plugin-import@2.22.1
├── eslint-plugin-jsx-a11y@6.3.1
├── eslint-plugin-node@11.1.0
├── eslint-plugin-prettier@3.1.4
├── eslint-plugin-promise@4.2.1
├── eslint-plugin-react@7.21.4
├── eslint-plugin-react-hooks@4.1.2
├── eslint-plugin-react-native@3.10.0
├── UNMET PEER DEPENDENCY eslint-plugin-standard@>=4.0.0
├── husky@4.3.0
├── jest@26.5.3
├── jetifier@1.6.6
├── lint-staged@10.4.0
├── lodash@4.17.20
├── metro-react-native-babel-preset@0.63.0
├── moment@2.29.1
├── prettier@2.1.2
├── prop-types@15.7.2
├── react@16.13.1
├── UNMET PEER DEPENDENCY react-dom@*
├── react-firestore@1.0.1
├── react-instantsearch-native@6.7.0
├── UNMET PEER DEPENDENCY react-native@0.63.3
├── react-native-actionsheet@2.4.2
├── react-native-appearance@0.3.4
├── react-native-autocomplete-input@4.2.0
├── react-native-awesome-alerts@1.4.1
├── react-native-background-timer@2.4.1
├── react-native-camera@3.40.0
├── react-native-contacts@6.0.1
├── react-native-country-picker-modal@2.0.0
├── react-native-create-thumbnail@1.2.1
├── react-native-device-info@6.2.0
├── react-native-dropdown-picker@3.7.0
├── react-native-fast-image@8.3.2
├── react-native-fs@2.16.6
├── react-native-gesture-handler@1.8.0
├── react-native-haptic-feedback@1.11.0
├── react-native-image-crop-picker@0.34.1
├── react-native-image-picker@2.3.4
├── react-native-in-app-message@1.0.32
├── react-native-iphone-x-helper@1.2.1
├── react-native-linear-gradient@2.5.6
├── react-native-mixpanel@1.2.3
├── react-native-modal@11.5.6
├── react-native-modal-datetime-picker@9.0.0
├── react-native-mov-to-mp4@0.2.2
├── react-native-permissions@2.2.2
├── react-native-popup-menu@0.15.9
├── react-native-pose@0.9.1
├── react-native-progress@4.1.2
├── react-native-reanimated@1.13.1
├── react-native-safe-area-context@3.1.8
├── react-native-screens@2.11.0
├── react-native-sms@1.11.0
├── react-native-snap-carousel@3.9.1
├── react-native-swiper@1.6.0
├── react-native-tab-view@2.15.2
├── react-native-track-player@2.0.0-rc13
├── react-native-vector-icons@7.1.0
├── react-native-video@5.1.0-alpha8
├── UNMET PEER DEPENDENCY react-native-web@*
├── UNMET PEER DEPENDENCY react-native-windows@>=0.62
├── react-redux@7.2.1
├── react-redux-firebase@3.7.0
├── react-test-renderer@16.13.1
├── redux@4.0.5
├── redux-firestore@1.0.0-alpha.2
├── redux-persist@6.0.0
├── redux-promise-middleware@6.1.2
├── redux-thunk@2.3.0
├── rn-fetch-blob@0.12.0
├── typescript@4.0.3
└── uuid@3.4.0
[code] setUsersListener = (pageChange = 0, orderBy = null, orderDir = null) => {
const { firestore } = this.props;
if (this.usersListener) this.usersListener();
const { firestore } = this.props;
if (this.usersListener) this.usersListener();
console.log(`orderBy(${this.state.usersInfo.orderBy}, ${this.state.usersInfo.orderDir})`);
let realDir = orderDir ? orderDir : this.state.usersInfo.orderDir;
let q = firestore.collection('users')
.where('company.id', '==', this.state.userData.company.id)
.orderBy(
orderBy ? orderBy : this.state.usersInfo.orderBy,
realDir
);
if (pageChange > 0) {
console.log('Going to next page');
q = q
.limit(this.state.usersInfo.usersPerPage)
.startAfter(
this.state.usersInfo.snapshots[
this.state.usersInfo.snapshots.length - 1
]
);
} else if (pageChange < 0) {
console.log('Going to previous page');
q = q
.limitToLast(this.state.usersInfo.usersPerPage)
.endBefore(this.state.usersInfo.snapshots[0]);
} else {
console.log('Displaying first page', this.state.usersInfo.usersPerPage);
q = q
.limit(this.state.usersInfo.usersPerPage);
}
this.usersListener = q.onSnapshot((querySnapshot) => {
const users = querySnapshot.docs.map((doc) => {
return {
id: doc.id,
...doc.data(),
};
});
let snapshots = [];
querySnapshot.forEach((snapshot) => {
snapshots.push(snapshot);
});
this.setState({
usersInfo: {
...this.state.usersInfo,
users,
snapshots,
},
});
});
};[/code]
It needs snapshot for startAfter / endBefore but there is no snapshot in firestoreConnect function.
Hello Everyone, This is about a small social media App. I'm using RRF to pull post docs from firestore and rendering on the UI using FlatList. How do I implement pagination? Right now, the PostFeed screen is pulling in all docs from post collection, I want to pull in 50 when the screen first mounts, then 50 more when you've scrolled to the bottom or last of the first 50 posts. How do I do this using RRF or another technique? Then I also want to pulling recent posts when the FlatList has been pulled to refresh. Is there a way to render the new posts in floating thumbnails at the top of the FlatList (just like twitter)?
Hello all! Im having an issue where my queries are taking a long time (feels like they are being blocked, running synchronously ) for example on a webpage load I might have 3-4 components load with firestoreconnect i.e.
{
collection: 'users',
where: [
['projectId', '==', `${props.match.params.spaceId}`],
[`deletedAt`, '==', 0]
],
storeAs: `workspaceMembers.${props.match.params.spaceId}`
}There's times when the view tasks around 45 secs - 3 mins until the "isLoaded" flag becomes true. If any one has had similar issues i'd love to learn how you fixed this.
Hello! I'm new to React-Redux-Firebase and was wondering what the best way of getting some data from a collection is? I have a collection with a few documents, but only want certain documents depending on a property they have (if the userID they have matches the userID of the logged in user). What would the best way to achieve this? Would I need to make a new reducer?
export default combineReducers({
firestore: firestoreReducer,
firebase: firebaseReducer,
activities: activityReducer,
});
Hi, I can't seem to get populate to work.
I've followed the official examples on it - defined an enhance function outside of the App function and did export default enhance(App) at the end of the file, yet when I access the data in the store the owner keys in each todo from todos aren't replaced with the appropriate data. Does anyone have a working example app to share?
Clarification - when i do
const fb = useSelector(state => state.firebase.data); console.log(fb) both the owners and todos are already loaded (without me needing to call useFirebaseConnect('todos'); useFirebaseConnect('owners');.
So it seems that it's a bug but I can't be sure.
How can I use firestore in a thunk? I see most functions are all about getting data in the component, but what if I want to move all of my querrying to thunks instead of out in the individual components? I cannot use
getFirebase().firestore as that doesn't exist, so how would I be able to query data from firestore if I'm not inside the component scope but in a thunk function? You seem to have a recipe for thunks but only for firebase, not firestore.
Sorry that’s getFirebase().firestore()
Add getFirebase as an extraArgument to thunk as in the docs
I import getFirebase from react-redux-firebase
@rshibli I managed to implement it, however, using firestore that way doesn't give me the redux bindings, ie. the data I querry will not be stored in redux. I added redux-firestore to my config, and it works fine in the components, but it doesn't appear to have a similar method like getFirebase() in rrf. I know it's a differrent plugin, but I also understand you guys are connected (or have the same creators), and the other room isn't very active, so figured I'd ask here, maybe you know yourself, as I already have your attention :)
although i don't think i'm doing any querying in thunks, only writing to firestore.
It's a rematch specific config, so not sure how that is going to help, but you asked for it :)
import { init } from '@rematch/core'
import * as models from './models'
import firebase from 'firebase/app'
import 'firebase/firestore'
import 'firebase/auth'
import { firebaseReducer } from 'react-redux-firebase'
import { firestoreReducer } from 'redux-firestore'
const config = {
//... firebase config object
}
if (typeof window !== 'undefined') {
firebase.initializeApp(config)
const db = firebase.firestore()
//... localhost setup for firestore emulator
}
const store = init({
models,
redux: {
reducers: {
firebase: firebaseReducer,
firestore: firestoreReducer,
},
}
})
export default store
and here is what normally goes into App.js
import React from "react"
import { Provider, useSelector } from "react-redux"
import { getPersistor } from '@rematch/persist'
import { PersistGate } from 'redux-persist/lib/integration/react'
import { ReactReduxFirebaseProvider, isLoaded } from 'react-redux-firebase'
import { createFirestoreInstance } from 'redux-firestore'
import firebase from 'firebase/app'
import store from 'src/rematch'
import Loading from 'src/components/UI/Loading/Loading'
const persistor = getPersistor()
const onBeforeLift = () => {
// console.log('PersistGate.onBeforeLift')
}
const rrfConfig = {
userProfile: 'users',
enableClaims: true,
useFirestoreForProfile: true
}
export const rrfProps = {
firebase,
config: rrfConfig,
dispatch: store.dispatch,
createFirestoreInstance
}
const AuthIsLoaded = ({ children }) => {
const auth = useSelector(state => state.firebase.auth)
if (!isLoaded(auth)) return <Loading />;
return children
}
export default ({ element }) => (
<Provider store={store}>
<PersistGate
loading={<Loading />}
onBeforeLift={onBeforeLift}
persistor={persistor}>
<ReactReduxFirebaseProvider {...rrfProps}>
<AuthIsLoaded>
{element}
</AuthIsLoaded>
</ReactReduxFirebaseProvider>
</PersistGate>
</Provider>
)
I think you should be doing that in store = init({...})
or in a plugin
sorry, rematch uses models, and inside models there are effects for async functions, similar to thunks (or I just don't have enough knowledge of what thunks do), this is the structure of a typical model:
export default {
state: {
count: 0
},
reducers: {
updateCount(state, value) {
return { ...state, count: value }
}
},
effects: dispatch => ({
async getCounts(payload, rootState) {
//... do async stuff
},
})
}
:wave: all,
Recently I started using "react-redux-firebase".
I have list of items (each item has subcollection) and on user selection I take one item and store the data for its sub-collection as storeAs: 'activeItemSubcollection'
But later if I go back and choose another item, I already have some data in activeItemSubcollection, and for less then e second (while new item data is fetched) I see the old item data. Does someone knows how can I clean 'activeItemSubcollection' while moving from one component to another (also I am changing routes, if this helps)
Recently I started using "react-redux-firebase".
I have list of items (each item has subcollection) and on user selection I take one item and store the data for its sub-collection as storeAs: 'activeItemSubcollection'
But later if I go back and choose another item, I already have some data in activeItemSubcollection, and for less then e second (while new item data is fetched) I see the old item data. Does someone knows how can I clean 'activeItemSubcollection' while moving from one component to another (also I am changing routes, if this helps)
Hello
Any ideas why this only works without the isCompleted check?
useFirestoreConnect(() => [
{
collection: `Firms/${firmId}/activities`,
where: [
['clientId', '==', client.id],
['type', '==', 'task'],
['isCompleted', '==', 'false'], // Works if I remove this, but doesn't get the data I want
],
storeAs: `${userId}/clients/${client.id}/incompleteTasks`,
},
]);right now it returns []
Some parts like auth are already working but I'm getting that when I try to use useFirebaseConnect
I got a collection thats available for read without login and for some reason logging out clears it from redux