Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    solveretur
    @solveretur
    Do you know whether isLoaded method with firestore works correctly ? I have an issue that it's false only for the first load, after that even if I change the document it loads - the isLoaded is always true - more details here https://stackoverflow.com/questions/64096209/react-redux-firebase-isloaded-only-false-for-the-first-document-when-using-fir - is it a known issue and does someone know how to solve it ?
    Jenna Kim
    @JennaDJK_twitter
    This message was deleted
    3 replies
    benomatis
    @benomatis
    @gregfenton I’m guessing it doesn’t make much sense to post my question I already posted in redux-firestore here again…? :)
    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
    MikeLundahl
    @MikeLundahl
    Hi all, I'm new to firebase with redux. Wondering if anyone knows if there's a good way to wait for redux-firestore to get the documents after firing onAuthStateChanged(user => if(user){do stuff}) when signing in?
    10 replies
    Dawson Botsford
    @dawsbot

    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
    Trevor Hartman
    @devth
    has anyone played with optimistic updates? i'm building a chat feature and it's just too slow with useFirestoreConnect and a click handler that calls .add on a firestore collection
    Christian Garrovillo
    @cgarrovillo
    Is there a native way to reference multiple database instances?
    jkadfl
    @jkadfl1_twitter
    What is the correct way to use pagination with firestoreConnect? Currently we use this code in the component to set listener:
    [code] setUsersListener = (pageChange = 0, orderBy = null, orderDir = null) => {
    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.
    Jsh007
    @Jsh007
    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)?
    Pierre Gagliardi
    @Cchumi
    @Jsh007 hi you must use the limit query property then use onendreach on your flat list to call the next 50 with start property of query and limit to 50. Store the initial query in a state then add the scroll queries to the same state. You will got a paginated flat list.
    Larry Mickie
    @larrymickie_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.

    Elad Karni
    @EladKarni
    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,
    });
    gligorot
    @gligorot

    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.
    benomatis
    @benomatis
    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.
    Reza
    @rshibli
    @benomatis I am able to use Firestore with getFirebase.firestore().
    Sorry that’s getFirebase().firestore()
    Add getFirebase as an extraArgument to thunk as in the docs
    I import getFirebase from react-redux-firebase
    benomatis
    @benomatis
    @rshibli what complicates things is that I use rematch, which is a redux framework, so setting that up specifically for this is a little beyond my skillset, but I'll try to figure it out somehow, maybe contact rematch support for that thanks
    Reza
    @rshibli
    👍🏾 good luck
    benomatis
    @benomatis
    @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 :)
    Reza
    @rshibli
    @benomatis I'm not a contributor to these libraries, just a user. I may be able to help if you can show me how you set up your store.
    although i don't think i'm doing any querying in thunks, only writing to firestore.
    benomatis
    @benomatis
    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
    benomatis
    @benomatis
    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>
    )
    Reza
    @rshibli
    where are you setting up redux thunk as a middleware?
    I think you should be doing that in store = init({...})
    or in a plugin
    Reza
    @rshibli
    are you sure you should be using redux-thunk with rematch?
    benomatis
    @benomatis
    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
            },
        })
    }
    Reza
    @rshibli
    OK, sorry I thought your question was about redux-thunk, I don't think I can help you.
    benomatis
    @benomatis
    ok, thanks anyway
    Јане Џумеркоски
    @janedzumerko
    :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)
    benomatis
    @benomatis
    how do I clear firestore (!) requesting and requested statuses? It looks like they remain, even though I do call the CLEAR_DATA actionType
    Јане Џумеркоски
    @janedzumerko
    @benomatis how do you use CLEAR_DATA actionType to clear firestore data ?
    benomatis
    @benomatis
    @janedzumerko dispatch({ type: actionTypes.CLEAR_DATA })
    Јане Џумеркоски
    @janedzumerko
    Did you extended the requestedReducer with CLEAR_DATA ?
    benomatis
    @benomatis
    @janedzumerko I honestly don't know how I'd go about to do that.
    Elad Karni
    @EladKarni

    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 []

    benomatis
    @benomatis
    @EladKarni could it be that you look for a string as a value instead of a boolean?, ie. you have 'false' (with single quotes) while a boolean would be false (no quotes)... just a wild guess
    Marsunpaisti
    @Marsunpaisti
    Any idea why I'm getting Uncaught Error: FIREBASE FATAL ERROR: Cannot parse Firebase url please use https://<YOUR FIREBASE>.firebaseio.com even though my firebaseconfig is copypasted from the console?
    Some parts like auth are already working but I'm getting that when I try to use useFirebaseConnect
    Marsunpaisti
    @Marsunpaisti
    hell, even when I access the database url with my browser I can get data out with http requests
    Marsunpaisti
    @Marsunpaisti
    ah, updated the firebase package ( from yesterdays version ) and it works