Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    spaceViking
    @oweldon
    So that I could have a new field for itemName set to what ever the docId is
    Scott Prue
    @prescottprue

    Seems like you mean a parameter on the document level when adding a subcollection document.

    .add returns the a promise that resolves with the document reference as noted in the Firebase docs. That means that you can do the following:

    const auctionQueryRef = firestore.collection('auctions').doc(auctionId)
    
    // Push new item to "items" subcollection of auction doc
    const newDocSnap = await auctionQueryRef.collection('items')
     .add({
      ...newInstance,
      auctionId: auctionId,
      createdBy: uid,
      createdAt: firestore.FieldValue.serverTimestamp(),
    })
    
    // Update auction doc with itemId
    await auctionQueryRef.update(auctionQuerySettings, { itemId: newDocSnap.id })

    Something to note though: This is a bit of a weird pattern since there would most likley be many itemIds for a single auction "items" is a subcollection

    Rohit Mittapalli
    @Rohit42
    I am currently using firestoreConnect to sync my react component with firestore. I used BrowserRouter to move around my application. However when I do so, my react component no longer syncs with firestore, I have to refresh the page to get it to sync up again. Am I doing something wrong?
    import React, { Component } from 'react'
    import Portfolio from '../stocks/Portfolio'
    import Notifications from './Notifications'
    import StatusPanel from './StatusPanel'
    
    import { connect } from 'react-redux'
    import { firestoreConnect } from 'react-redux-firebase'
    import { compose } from 'redux'
    import { Redirect } from 'react-router-dom'
    
    
    
    class Dashboard extends Component {
    
      componentDidMount () {
        console.log("Dashboard Mounted")
      }
      render() {
        const { stocks, auth, notifications, stock_data, total, liquid, Timer } = this.props;
        if (!auth.uid) return <Redirect to='/signin' /> 
        return (
          <div className="dashboard container">
            <div className="row">
              <div className="col s12 m6">
                <Portfolio stocks={stocks} stock_data ={stock_data} Timer = {Timer} />
              </div>
              <div className="col s12 m5 offset-m1">
                <div className="timer_box">
                  <div className="chip timer">
                    Timer: {Timer}
                  </div>
                </div>
                <StatusPanel liquid = {liquid} total = {total} stocks={stocks} stock_data={stock_data} Timer = {Timer}></StatusPanel>
    
                <Notifications notifications={notifications} />
              </div>
            </div>
          </div>
        )
      }
    }
    
    const mapStateToProps = (state) => {
      // console.log(state);
      const uid = state.firebase.auth.uid;
      const users = state.firestore.data.users;
      const user = users ? users[uid] : null;
      const stocks = user ? user['stocks'] : null;
      const liquid = user ? user['liquid'] : null;
      const total = user ? user['total'] : null;
      const stock_data = state.firestore.data.stock_data;
      const Timer = stock_data ? stock_data["Game"]['Timer'] : null;
    
      return {
        liquid: liquid,
        total: total,
        stocks: stocks,
        auth: state.firebase.auth,
        notifications: state.firestore.ordered.notifications,
        stock_data : stock_data,
        Timer : Timer
      }
    }
    
    export default compose(
      connect(mapStateToProps),
      firestoreConnect([
        { collection: 'users'},
          {collection: 'stock_data'},
        { collection: 'notifications', limit: 3, orderBy: ['time', 'desc']}
      ])
    )(Dashboard)
    Scott Prue
    @prescottprue
    @Rohit42 try using storeAs or installing from the ‘alpha’ tag on npm. Currently working on how stuff is stored in state for firestore to address some similar issues
    Rohit Mittapalli
    @Rohit42
    Hello! I am pretty new to react/firestore, what does storeAs do/how do I use it?
    Scott Prue
    @prescottprue
    Stores query results in different parts of state: http://react-redux-firebase.com/docs/firestore.html#storeAs
    In the alpha version things are automatically stored by the query (to prevent stuff like this). The issue was that the logic was originally ported over from RTDB which functions slightly differently as far as merging and child updates
    Rohit Mittapalli
    @Rohit42
    so right now, I currently have it setup so that there is a ticker incrementing every second in firestore, would this be able to handle the change?
    Also if I do use storeAs, how does that affect my mapstatetoprops?
    Scott Prue
    @prescottprue

    Yes it would. I’m on my phone, so the docs like above will probably explain better than I can (including how to use in your map state to props).

    That said, you may want to do this over RTDB instead of firestore since there is a 1sec read/write speed cap on firestore documents: https://firebase.google.com/docs/firestore/quotas#writes_and_transactions

    Rohit Mittapalli
    @Rohit42
    It's a rather small scale application just for a school project, so it should be okay but I can keep that in mind for the future. Thank you for the help, I will try to understand the documents
    Rohit Mittapalli
    @Rohit42
    I tried out storeAs according to the documentation but was unable to resolve my issue. I believe the issue is that when the object is getting mounted using router it no longer gets updated, does anyone know of a fix?
    Jason M-H
    @iFallUpHill
    Hello! Was wondering if it was possible to take the a set of documents from one firestoreConnect and make multiple subqueries to merge in other properties (e.g. I store user refs inside of a document in another collection and I want to pull in that user when getting a list of documents from that other collection)
    Jason M-H
    @iFallUpHill
    I /think/ this if I've read up on this correctly I'm looking for populate? But I'm not 100% sure
    Scott Prue
    @prescottprue
    @iFallUpHill yup, you are looking for populate
    Jason M-H
    @iFallUpHill
    @prescottprue cool thanks! I noticed populate support was potentially coming in 0.6.0, what do you suggest in the mean time?
    Chethan Bhat
    @chethanbhat
    Hello. Can someone tell me how to use onSnapshot while using redux-firestore in firestoreconnect or mapStateToProps
    I want to subscribe to real time changes to firestore data
    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