Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    Scott Prue
    @prescottprue
    @chethanbhat that is what setListener and setListeners do. If you want the listeners to attach and detach automatically on mount/unmount you can use firestoreConnect more details are available in the docs
    jaschaio
    @jaschaio
    Is there a way to limit create requests? I can limit update requests using allow update: if request.time < resource.data.createdAt + duration.value( 60, 's' ); but what if the resource doesn't exist yet? What if I want to limit requests (both authenticated and not authenticated) to a maximum of 1 newly created document per minute?
    Scott Prue
    @prescottprue
    @jaschaio I believe there is request.data
    Dorian
    @Dorianslavov
    hello guys, so for example i am loading 10 documents, what's the way to make for example a button which will load another 10 documents on click. What's the firestore way to do this ?
    Scott Prue
    @prescottprue
    @Dorianslavov you most likely want to wire a query to the button similar to the manual query example for Firestore but provide limit: 10. You may also want to use a unique storeAs for each 10 doc set so you can group them easily (into pages or sections)
    jaschaio
    @jaschaio
    @prescottprue you mean request.resource.data? Sure, but how would that help in this case?
    Cortlan Bainbridge
    @cortl
    Hi, I'm building a grocery list app with a collection of items structured like
    {itemId}: {
        name: 'Apples',
        userId: 'unique auth user id'
    if there are two items in the collection (with two different user ids), it throws me a permission denied error when loading this component
    export default compose(
        connect(mapStateToProps),
        firestoreConnect([
            {collection: 'items'},
            {collection: 'associations'}
        ]))(ItemList)
    my firebase.rules is structured like
    allow read: if request.auth.uid != null &&
            request.auth.uid == resource.data.userId;
    Cortlan Bainbridge
    @cortl
    even if there is only one item in the collection with the appropriate userId I'm still getting a permission error
    previously the if request.auth.uid != null was working fine, so I'm not sure what's wrong with the new part of my query request.auth.uid == resource.data.userId;
    Scott Prue
    @prescottprue
    @cortl you will need to modify your query to include querying for where userId == uid. Rules don’t work automatically as filters, they just block queries and you are querying for all items (even those you don’t own)
    Will Adams
    @bushblade
    Hi I'm new to react-redux-firebase though have used firebase before. I'm having difficulty getting it working, I've followed and used the code from the docs for my store.js / redux set up but I am getting the following error
    TypeError: Cannot read property 'firestore' of undefined
    FirestoreConnect.componentWillMount
    node_modules/react-redux-firebase/es/firestoreConnect.js:142
      139 | _createClass(FirestoreConnect, [{
      140 |   key: 'componentWillMount',
      141 |   value: function componentWillMount() {
    > 142 |     var firestore = this.store.firestore;
          | ^  143 | 
      144 |     if (this.firestoreIsEnabled) {
      145 |       var inputAsFunc = (0, _utils.createCallable)(dataOrFn);
    Scott Prue
    @prescottprue
    @bushblade Do you have your component tree wrapped in Provider that passes store to context? Like so:
    const App = () => (
      <Provider store={store}>
        <Todos />
      </Provider>
    );
    Will Adams
    @bushblade
    @prescottprue Hi thanks for the response, I do yes.
    Scott Prue
    @prescottprue
    Do you have the reduxFirestore and reactReduxFirebase store enhancers in your store creation? Seems like reduxFirestore may be missing
    Will Adams
    @bushblade
    @prescottprue Yes I do here is my store.js
    import { createStore, combineReducers, compose } from 'redux'
    import firebase from 'firebase'
    import 'firebase/firestore'
    import { reactReduxFirebase, firebaseReducer } from 'react-redux-firebase'
    import { reduxFirestore, firestoreReducer } from 'redux-firestore'
    
    
    const firebaseConfig = {
    
    }
    firebase.initializeApp(firebaseConfig)
    
    const firestore = firebase.firestore()
    firestore.settings({ timestampsInSnapshots: true })
    
    const rrfConfig = {
      userProfile: 'users',
      useFirestoreForProfile: true 
    }
    
    const createStoreWithFirebase = compose(
      reduxFirestore(firebase), // <- needed if using firestore
      reactReduxFirebase(firebase, rrfConfig) // firebase instance as first argument
    )(createStore)
    
    const rootReducer = combineReducers({
      firebase: firebaseReducer,
      firestore: firestoreReducer // <- needed if using firestore
    })
    
    const initialState = {}
    
    const store = createStoreWithFirebase(
      rootReducer,
      initialState,
      compose(
        reactReduxFirebase(firebase),
        window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
      )
    )
    
    export default store
    and this is where I first calling it in my component
    export default compose(
      firestoreConnect([{ collection: 'clients' }]),
      connect((state, props) => ({
        clients: state.fireStore.ordered.clients
      }))
    )(Clients)
    sanbeaman
    @sanbeaman
    Is it possible to include a secondary firebase app instance, in order to access a database or firestore on second firebase app?
    Scott Prue
    @prescottprue
    @bushblade it actually looks like you are adding the reactReduxFirebase enhancer twice. If you make the createStoreWithFirebase function with the enhancers you don’t need to pass them again when calling the store creator
    @sanbeaman it is currently possible to do that by running two separate redux stores, but the v3.0.0 roadmap has better support for multiple apps as a proposed feature
    Will Adams
    @bushblade

    @prescottprue thanks but even with

    const store = createStoreWithFirebase(
      rootReducer,
      initialState,
      compose(window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())
    )

    I still get the same error

    Scott Prue
    @prescottprue
    I think passing anything as a third argument will run over what’s there. Checkout the use section of the Readme.
    Will Adams
    @bushblade
    Thanks I removed the third argument (redux devtools) but the same error persists
    Will Adams
    @bushblade
    @prescottprue I just tried downgrading react-redux from version 6 to 5.1.1 and I get a different error
    TypeError: Cannot read property 'ordered' of undefined
    Scott Prue
    @prescottprue
    @bushblade yeah there is not yet support for react-redux v6 (it just came out and it requires some pretty big changes). This error would be because you are trying to pull off state.fireStore instead of state.firestore (no capitals)
    Will Adams
    @bushblade
    @prescottprue Oh thanks a bunch yeah downgrading and spotting my typo fixed it!
    sanbeaman
    @sanbeaman
    @prescottprue I tried to wrap my head two separate redux stores and I looked at the issue realted to this 579
    import adminConfig from './config/adminConfig';
    import studentConfig from './config/studentConfig';
    
    const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
    
    const enhancer = composeEnhancers(
      applyMiddleware(thunk.withExtraArgument({ getFirebase, getFirestore })),
      reduxFirestore(adminConfig), // redux bindings for firestore
      reactReduxFirebase(adminConfig, {
        userProfile: 'users',
        useFirestoreForProfile: true,
        attachAuthIsReady: true,
      }),
    );
    
    const store = createStore(rootReducer, enhancer);
    
    store.firebaseAuthIsReady.then(() => {
      ReactDOM.render(
        <Provider store={store}>
          <App />
        </Provider>,
        document.getElementById('root')
      );
      serviceWorker.unregister();
    });
    @prescottprue Trying to include access to a second firebase app with a datatbase and firestore using the studentConfig
    Scott Prue
    @prescottprue
    @sanbeaman Are you doing server side rendering? Doesn't appear so since you are also including window stuff? firebaseAuthIsReady was intended to be used in SSR, so not sure how it will function in this case
    We can message directly about the two stores setup since it will probably be a bit of back and forth. Personally I don't highly suggest it. You may be better off picking one of the two to have in react-redux-firebase for now and query the other manually (you can even put the results into react-redux-firebase's redux state by dispatching actions with imported actionTypes)
    Since there are a number of users requesting this feature these days, it has definitely moved up in priority
    sanbeaman
    @sanbeaman
    @prescottprue I appreciate the quick response, I'll try a figure out how to manually access secondary app. I was using firebaseAuthIsReady to prevent the app from rendering until connection is made to firebase... i thought that was it's purpose..
    Scott Prue
    @prescottprue
    @sanbeaman I think what you were going for is described in the query docs in the "wait for data to load" section.
    sanbeaman
    @sanbeaman
    @prescottprue thank you! I'll check it out
    claudiarslima
    @claudiarslima
    Hi! I'm new to Redux and I'm trying to restrict the data that appears on the page of an user based on a firestoreConnect query using the 'where' clause. Basically I have a page with a list of products and the user can do a like in a product and this product appears in a wishlist so I need to show the products that are associated to the user who liked.
    image.png
    The where clause isn't working
    Scott Prue
    @prescottprue
    @claudiarslima you want to put the redux state connection after your firestoreConnect. Also what version are you running or redux-firestore and react-redux-firebase
    Random Precision Ltd
    @precisioncoding_twitter
    @prescottprue I've just tried your recommendation to @claudiarslima to put the redux state after the firestoreConnectas I'm working towards the same solution; however, that throws an error TypeError: Cannot read property 'state' of undefined? @claudiarslima did you work out a solution on your own?
    Jon R. Humphrey
    @jonrandahl
    apologies @prescottprue & @claudiarslima I accidentally composed that message from my other account: @precisioncoding_twitter! #doh! Could any replies be made to me on this account? Very much obliged and happy new year to all!
    Jon R. Humphrey
    @jonrandahl
    I think I sorted this out @prescottprue, it seems to be working well, I wonder if anyone can point out any downfalls?
      componentDidUpdate(prevProps) {
        // Typical usage (don't forget to compare props):
        if (this.props.charityId !== prevProps.charityId) {
          this.setState({ charityId: this.props.profile.primaryCharity.id });
        }
      }
    
    ...
    
    const mapStateToProps =  (state) => {
      // console.info('analytics state', state);
      return {
        uid: state.firebase.auth.uid,
        profile: state.firebase.profile,
        charityId: state.firebase.profile.isLoaded ? state.firebase.profile.primaryCharity.id : "0",
        transactions: state.firestore.ordered.transactions || null,
      }
    }
    
    export default compose(
      connect(mapStateToProps),
      firestoreConnect((props) => [
        {
          collection: 'transactions',
          where: [
            // [ 'agent.id', '==', props.uid ] //<- this works but is the wrong filter
            [ 'charity.fb_page_id', '==', props.charityId ] //<- right filter, falls over as id doesn't exist yet
          ]
        }
      ]),
    )(Analytics);
    Aviyam Ivgi
    @aviyam1811_gitlab
    Hey,
    There are any news about the progress on supporting reference data type in listeners? (ISSUE-#60)... I waiting for this so much and I cant find any elegant workaround to fix this by using only react-firestore?
    SagarSidabs
    @SagarSidabs
    Hey guys, I am trying to get multiple subcollections from a collection using firestore connect. I get the data correctly in firestore.collectionName.data but i get only the last subcollection data in the firestore.collectionName.ordered. Is there a way to use aliases instead of overwriting the variable names in ordered.
    firestoreConnect(props => [
        { collection: "matches", doc: props.match.params.matchId },
        {
          collection: "matches",
          doc: props.match.params.matchId,
          subcollections: [{ collection: "firstInningsBatting" }]
        },
        {
          collection: "matches",
          doc: props.match.params.matchId,
          subcollections: [{ collection: "secondInningsBatting" }]
        },
        {
          collection: "matches",
          doc: props.match.params.matchId,
          subcollections: [{ collection: "firstInningsScore" }]
        },
        {
          collection: "matches",
          doc: props.match.params.matchId,
          subcollections: [{ collection: "secondInningsScore" }]
        }
      ])
    Scott Prue
    @prescottprue
    @SagarSidabs you can use storeAs to alias results
    SagarSidabs
    @SagarSidabs
    oh cool, so the syntax will be , storeAs : secondInningsScore after each subcollections key
    Thanks scott, thanks for this wonderful package
    Scott Prue
    @prescottprue
    @SagarSidabs Yup! Glad you like it :) The newer version (available through alpha tag on npm) stores sub-collections differently by default in hopes of combating a number of issues (some similar to what you are describing) - so that might also be worth a try
    Jon Haro
    @eleventhaus
    @prescottprue I'm trying to connect firestore to redux-form. Firestore doesn't receive data/ordered until LISTENER_RESPONSE is called but by then I already have gotten an error that variable is undefined. I'm following the docs and using the compose/connect method for class components: