Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    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
    Marsunpaisti
    @Marsunpaisti
    Is there a reason that firebase.logout() clears data from firebase.data even though said data is not gated behind authentication
    I got a collection thats available for read without login and for some reason logging out clears it from redux
    Elad Karni
    @EladKarni

    @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

    That was it!!! Clearly I'm just an idiot lol

    Tim Arnold
    @TMcLoone
    is there a way to clear any firestore listeners (set up with useFirestoreConnect) on logout?
    Matthias Schmid
    @mschmid
    Hi there! Great to have such a community here. I have a (probably newbie) question. I would like to go from plain objects from Firestore DB to more type-safe typescript classes. The official docs mention a FirestoreDataConverter. Is something similar also supported within redux-firebase / redux-firestore?
    benomatis
    @benomatis
    Cloud Functions don't work at all, so it seems, I had to create a separate hook only to initiate functions, and so it's only available in a component scope, not outside (ie. in a thunk). Is this by design? My use case is simply to execute callable functions.
    Alex
    @a-zen

    Hi, how can I wait for data loading before putting the values into a state? I want to retrieve data and present a form where the data can be manipulated by the user. It looks something like this:

    useFirestoreConnect([ { collection: auth.uid, doc: profile, storeAs: 'profile', }, ]);
    const profile = useSelector((state) => state.firestore.data['profile']); const [name, setName] = useState(profile.name);

    I get an error that 'profile.name' is not defined, probably because the data is not yet loaded. But I can't use isLoaded because of the useState.
    If I do a setName(profile.name)after the isLoaded check I get an infinite render error.

    mcardinalupgrade
    @mcardinalupgrade
    Hello, I've been stuck on something unexpected for the past couple of hours... I am using the createUser function to provision a user with a username+password and specify things like firstname, lastname, email in the profile payload. That information gets reflected in firebase auth + firestore as expected. My issue is then I call signIn with the same user+pass (so a signInWithEmailAndPassword), I successfully log in, I see the @@reactReduxFirebase/LOGIN trigger but the store profile node stays in isEmpty: true, isLoaded: false. Is this an expected behavior? I thought the profile would load upon a successful login. Thanks for your help!
    BahaaAS
    @BahaaAS
    This message was deleted
    7 replies
    Frode Sjovatsen
    @fsjovatsen
    Hello! Is there a way to trigger some code when a @@reduxFirestore/DOCUMENT_MODIFIED action is triggered. When I add/update a document in Firestore I have triggers server side that updates other documents. I want to be able to visualize that in my app.
    Benjamin
    @benjaminshafii

    Hey I have a design decision question:

      const teamId = useSelector((state) => state.firebase.data.profile.teamId);
      useFirestoreConnect({collection: 'rooms', where: ["team", '==', teamId || '']})

    How would you design your app to handle it knowing that team could be undefined which could in turn cause something like a "missing permissions error" (because of the empty string)

    Only solution I found was to have dumy components just waiting on the selectors

    const WaitUntilReady = () => {
      const teamId = useSelector(state => firebase.data.profile.teamId)
      if (!teamId) return null
    
       return <SomeComponentWithUseFirestoreConnect teamId={teamId} />
    }
    
    const SomeComponentWithUseFirestoreConnect = ({teamId}) => {
      useFirestoreConnect({collection: 'rooms', where: ["team", '==', teamId || '']})
     // render something
    }
    Nicole Latifi
    @NicoleLatifi

    Hello! First time posting here.

    We've been stuck on an error for several days now... Since updating react-redux-firebase from ^2.1.6 to ^3.9.0, we're getting the error TypeError: store.getState is not a function. when trying to build on iOs. This error is occurring in the second firestoreConnect:

    export default compose<any>(
     connect(
        (state: State): Partial<MVProps> => ({
          myUserId: get(state, 'user.profile.id'),
          villagers: getFromIds(state.users, state.users.villagers),
        })
      ),
      firestoreConnect(props => [
        {
          collection: 'rooms',
          where: [
            [`type`, '==', 'userToUser'],
            [`users.${props.myUserId}`, '==', true],
          ],
          storeAs: 'myRooms',
        },
      ]),
      firestoreConnect((_, store) => {
        const state = store.getState() as State;
        return flatten(
          defaultTo(state.firestore.ordered.myRooms, []).map((r: Room) =>
            keys(r.users).map((userId: string) => ({
              collection: 'users',
              where: ['userId', '==', userId],
              storeAs: 'myRoomsUsers',
            }))
          )
        );
      }),
      connect(
        (state: State): Partial<MVProps> => ({
          myRooms: state.firestore.ordered.myRooms,
          myRoomsUsers: state.firestore.data.myRoomsUsers,
        })
      )
    )(view);

    This codebase is still pretty new to us so we're still trying to work out exactly how the redux was set up and how firestoreConnect is being used here. We've tried refactoring how the store is created and we have tried updating other dependencies but still can't get past this error. If anyone has any insights about firestoreConnect() and getState() it would be most appreciated!

    Alex McKay
    @alexandermckay
    firestoreConnect only has one parameter: props. Docs here.