redux-firestore/Lobby

Okey Bond

@okeybond

can anyone advise, please?

gregfenton

@gregfenton

I did a thing. https://github.com/gregfenton/react-firestore-query-lab
Feedback welcomed/encouraged.
(my first NPM !! :bowtie: )

Wendy Liu

@lynklody

@lestgabo @pedrospecter_twitter I'm having the same issue here. Would you mind elaborate a bit on how you solved it?

gregfenton

@gregfenton

@lynklody - I think what @lestgabo describes is that the React component ends up rendering multiple times but only on later renderings does it actually have data. This is typical. You want to have a check in your rendering as to whether data has been received/loaded, and if not do something else like display a Loader.

gregfenton

@gregfenton

One way to do that is to get state.firestore.status.requesting passed to your component as a prop, then check that value to see if it is true.

const mapState = (state) => {
   // …
   return { requesting: state.firestore.status.requesting }
}

// …

render() {
  const { requesting } = this.props;
  const loading = Object.values(requesting).some(a => a === true); // see if any objects exist

  if (requesting) return <MyLoadingComponent />;

  // …render component as usual

gregfenton

@gregfenton

Has anyone seen a decent example of redux-firestore being used with “infinite scrolling”, or even just a simple page-by-page approach? I fear I’m doing a lot of work managing startAt values that maybe I don’t need to?

Wendy Liu

@lynklody

@gregfenton Thanks, I finally understand why I'm having this issue here: I used isLoaded to check whether the todos object is loaded from firestore and forgot to add my other object into the checking after I modified the structure of my database, which has been haunting me for all these days.

Wendy Liu

@lynklody

By the way is there any difference in using isLoaded and state.firestore.status.requesting to check the status of data loading?

gregfenton

@gregfenton

I’m not entirely sure. It seems that firestore.status.requesting is maintained by redux-firestore’s reducers as it SET_LISTENER’s.

isLoaded is maintained by react-redux-firebase’s reducers throughout all of its reducers’ actions.

r-r-f’s reducers code where you can see “isLoaded”: https://github.com/prescottprue/react-redux-firebase/blob/fe7a4cef10003bc62a08eb915dc53b146055cce9/src/reducers.js

redux-firestore’s code where you can see “requesting”: https://github.com/prescottprue/redux-firestore/blob/06e4bb47acac5246aac8145a4dd9d2cdd70454ad/src/reducers/statusReducer.js

I suspect that their intentions are nearly identical when it comes to “listener” actions. There are likely subtle differences.

Note: the r-r-f isLoaded is maintained for auth and profile. I doesn’t seem to come into play for listeners?

Wendy Liu

@lynklody

I see. Thank you for the clarification.

gregfenton

@gregfenton

Sure is quiet around here. Y’all good?

zaptrem

@zaptrem

Is this compatible with Sign In With Apple?

I'm getting "The custom token format is incorrect" when calling firebase.login(credentials) on credentials that work with signInWithCredential(credential). However, login seems to automatically create a user doc in firestore/users so I prefer it.

gregfenton

@gregfenton

I just spent time working on an issue that ends up being (maybe?) a known behaviour of state.firestore.data that is different from state.firestore.ordered

I’ve added a comment to an already-closed bug that I believe is related. Hopefully we’ll get clarification and then a docs update (if not a behaviour change):

prescottprue/redux-firestore#113

Dan McNamara

@DMcNamara

@zaptrem I have apple login working in my react native app. You can see how I did it here: https://github.com/DMcNamara/turnipBuds/blob/master/src/login/LoginScreen.tsx#L61

gregfenton

@gregfenton

I’m considering adding a RefreshControl to a <ScrollView> in a component that currently is using useFirestoreConnect(). Haven’t been able to wrap my head around what that code would look like. Thoughts/examples/pointers?

Dan McNamara

@DMcNamara

doesn't firestoreConnect automatically update the data when it changes in firestore? That change should just trigger a re-render of the list.

gregfenton

@gregfenton

I’m seeing instances where lists aren’t automatically updating. If I have 2 lists on two RN screens (where(“status”, “==”, “todo”) and where(“status”, “==“, “done”)), and a detail screen where I toggle the “status” field, returning to the lists doesn’t always show them updated.

It might be something to do with the environment (I notice that if I enable/disable “Debug” mode on the device that behaviour changes)

I figured having a built-in “refresh” gives the user (or at least me) some amount of control…or perception of control :)

Dan McNamara

@DMcNamara

yeah, it might depend on how you pass it. I feel like things passed using RN navigation's props/params don't autoupdate, but as long as you're pulling from the store with a connect or useSelector on each screen it should refresh? For the pull refresh, I think you'd just want to do a normal query in effect for it? I don't think you could use any of the HOC or hooks, but I'm not sure.

gregfenton

@gregfenton

Ah, right. I guess I could use useFirestore() instead of useFirestoreConnect and firestoreConnect ?

Dan McNamara

@DMcNamara

You might be able to do both? do firestore.get in the refresh and have the rest handled with the HOC? I'd prolly spend a bit of time trying to figure out why things don't always autoupdate first. I haven't actually tested that on my app yet, it's not a feature I really cared about.

gregfenton

@gregfenton

Yep, completely agreed. Thanks for the thought seeds!

Dan McNamara

@DMcNamara

anytime!

gregfenton

@gregfenton

Seems wierd to be asking this late into my development life…but is there a way, when using useFirestoreConnect and useSelector to distinguish between “data not yet loaded”, versus “no such results” ? From my testing, both situations seem to result in a redux node that has an empty array? Or maybe the queries are coming back so quickly that i’m just not catching the “still loading”?

Ah, looks like I should be using isLoaded() and isEmpty() …. which I probably am elsewhere and my feable brain has purged that data for being too long out of use.

Shubham Lingayat

@seebham

Hello, what an awesome library!
I want to implement Firestore pagination feature, I tried this:

const [fetchData, setFetchData] = useState({ start: 0, count: 3, data: [], length: 0, deleted: false })
const { auth, profile } = useSelector(state => state.firebase)
useFirestoreConnect([{collection: 'WithdrawalRequests', where: ['uid', '==', auth.uid], orderBy: ['reqdate','desc'], startAfter: fetchData.start, limit: fetchData.count}])
    const fetchReq = useSelector(state => state.firestore.ordered.WithdrawalRequests)
    useEffect(()=>{
        fetchReq && setFetchData(prevFData=>{console.log(fetchReq)
            let xdata = prevFData.data;
            if(fetchData.newElem) {
                return {...prevFData,length:fetchReq.length,data:fetchReq}
            }
            if(fetchData.data.length===0){
                fetchReq.push(...xdata)
                return {...prevFData,length:fetchReq.length,data:fetchReq}
            }
            if(fetchData.update) {
                xdata.push(...fetchReq)
                return {...prevFData,length:fetchReq.length,update:false,data:xdata}
            }
        })
    },[fetchReq])

This works on the page's first visit, but when I navigate to another page and come back to this, it crashes saying:
Cannot read property 'start' of undefined
My state fetchData gets undefined.
I also checked whether the listeners and queries in the redux DevTools, but everything looks fine there.
Please help!

28 replies

Mateusz Juszczyk

@MatixYo

Hello, is it possible to populate data from referenced firestore collection now? I mean referenced with Collection Reference and not collection's plain id

Mateusz Juszczyk

@MatixYo

I switched to using doc IDs instead of references and managed to get data using hooks like this:

const populates = [{ child: `video`, root: `videos` }]
const collection = `projects`
...
    useFirestoreConnect(() => [
        { collection, doc: id, populates }
    ])

    const item = useSelector(({ firestore }) => populate(firestore, collection, populates)?.[id])

I wonder now if it does query for all of the Docs in videos collection each time? So if videos will have 50 million records then will it request all of them each visit or only the ones that will be used for population of projects?

2 replies

diegoempi

@diegoempi

Hello, I'm using useFirestoreConnect, and looks like when I render a component from Link of react router, useFirestoreConnect is not being called, if I render the component directly, it's being called

2 replies

kombos

@kombos

has anyone who has used useFirestoreConnect() implemented the query paramater 'startAt'? it doesnt seem to work for me:

useFirestoreConnect(
    [
      {
        collection: "players",
        orderBy: "Name",
        startAt: startPosition,
        limit: pageSize,
      },
    ],
    [startPosition, pageSize]
  );

14 replies

diegoempi

@diegoempi

I'm having trouble understanding this method, can anyone help me?

function createWithFirebaseAndDispatch(firebase, dispatch) {
  return func => (...args) =>
    func.apply(firebase, [firebase, dispatch, ...args]);
}

10 replies

Karolis Laukys

@warmshadow

Hello everyone, I’ve got a question about automatic redux-firestore listeners. Is there an option to set a custom listener for a component using firestoreConnect or setListener that only dispatches actions on ‘added’ and ‘removed’ change type events for documents and ignoring change of type ‘modified’? Is it possible or can that behavior only be achieved writing it from scratch using firebase’s onSnapshot method?

1 reply

benomatis

@benomatis

Hi, In my react (gatsby) project I’m using rematch (a redux framework). I’d like to be able to interact mostly with my local redux store, but persist some data to firestore. I though using rematch’s own persist plugin (similar to redux-persist, as far as I understand), but I don’t know how to connect it with firestore. I was wondering if redux-firestore actually did the same thing as rematch(or redux)-persist or if there would be a way to combine the two.

Mohith Bhargav Sunkara

@swagking0

I just want to know can we use array.map() inside the firestoreConnect()?

Jon R. Humphrey

@jonrandahl

@swagking0 can you give an example of your code?

Sebastian Green

@krewllobster

Hi all, I'm running into a version this issue: (prescottprue/redux-firestore#174)

I've got a user profile page that shows all of a user's "logs", so I'm setting a listener for:

{
collection: 'myCollection',
doc: myDocId,
subcollections: [{ collection: 'logs' }],
where: [
['showInFeed', '==', true],
['userId', '==', userId],
],
orderBy: [['submittedAt', 'desc']],
storeAs: participantHighlights-${userId},
}

The problem is on initial load, firestore recognizes (I guess?) that I've already seen a few logs from a different query that matches the parameters, and auto-populates them. But after that, it goes and does a "DOCUMENT_ADDED" for each individual doc after those initial ones.

I've tried manually setting the listener and it didn't fix it. Is there a known way to prevent spam from DOCUMENT_ADDED?

^ It works perfectly for any user who's logs I haven't yet come across in the app. It has a single listener response with all of their logs. But for anyone with logs already in memory it is messed up

LGPCroeder

@LGPCroeder

I have a need to format a date string for each document in the collection. However i want to only perform this action on the initial load. Has anyone done anything similar?

Jon R. Humphrey

@jonrandahl

LGPCroeder, grep the format on load to verify and only modify if not as needed? Code examples of what you have already helps us help you! Happy new year to everyone as well!

fdscotta

@fdscotta

Hi everyone! I have this issue whit reduxFirestore and fbconfig in my index.tsx

Argument of type 'typeof firebase' is not assignable to parameter of type 'typeof import("/home/fran/donariov2/main/app/node_modules/firebase/index")'.
Property 'firebase' is missing in type 'typeof firebase' but required in type 'typeof import("/home/fran/donariov2/main/app/node_modules/firebase/index")'.ts(2345)

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorkerRegistration from './serviceWorkerRegistration';
import reportWebVitals from './reportWebVitals';

import { createStore, applyMiddleware, compose } from 'redux';
import rootReducer from './store/reducers/rootReducer';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import {
  reduxFirestore,
  getFirestore,
  createFirestoreInstance,
} from 'redux-firestore';
import {
  ReactReduxFirebaseProvider,
  getFirebase,
} from 'react-redux-firebase';
import firebase from 'firebase/app';
import fbconfig from './config/fbconfig';


const store = createStore(
  rootReducer,
  compose(
    applyMiddleware(thunk.withExtraArgument({ getFirebase, getFirestore })),
    reduxFirestore(fbconfig) // <- this line have the error
  ) 
);

const rrfProps = {
  firebase,
  config: fbconfig,
  dispatch: store.dispatch,
  createFirestoreInstance
}

ReactDOM.render(
  <Provider store={store}>
    <ReactReduxFirebaseProvider {...rrfProps}>
      <React.StrictMode>
        <App />
      </React.StrictMode>
    </ReactReduxFirebaseProvider>
  </Provider>,
  document.getElementById('root')
);

serviceWorkerRegistration.unregister();

reportWebVitals();

fdscotta

@fdscotta

Here is my fbconfig

import firebase from 'firebase/app';
import 'firebase/firestore';

let firebaseConfig = {
    apiKey: process.env.REACT_APP_FIREBASE_APIKEY,
    authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
    storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_FIREBASE_APP_ID,
  };
// Initialize Firebase
firebase.initializeApp(firebaseConfig); 
export default firebase;

and my packages

        "@googlemaps/js-api-loader": "^1.11.3",
        "@ionic/react": "^5.5.0",
        "@ionic/react-router": "^5.5.0",
        "@material-ui/core": "^4.11.3",
        "@testing-library/jest-dom": "^5.11.9",
        "@testing-library/react": "^11.2.5",
        "@testing-library/user-event": "^12.6.3",
        "@types/firebase": "^3.2.1",
        "@types/google.maps": "^3.44.3",
        "@types/jest": "^26.0.20",
        "@types/node": "^12.19.15",
        "@types/react": "^16.14.3",
        "@types/react-dom": "^16.9.10",
        "@types/react-router": "^5.1.11",
        "@types/react-router-dom": "^5.1.7",
        "axios": "^0.21.1",
        "firebase": "^8.4.1",
        "formik": "^2.2.6",
        "formik-material-ui": "^3.0.1",
        "ionicons": "^5.4.0",
        "react": "^17.0.1",
        "react-dom": "^17.0.1",
        "react-redux": "^7.2.3",
        "react-redux-firebase": "^3.10.0",
        "react-router": "^5.2.0",
        "react-router-dom": "^5.2.0",
        "react-scripts": "4.0.2",
        "redux": "^4.0.5",
        "redux-firestore": "^0.15.0",
        "redux-thunk": "^2.3.0",
        "sass": "^1.32.8",
        "typescript": "^4.1.3",
        "web-vitals": "^0.2.4",
        "workbox-background-sync": "^5.1.4",
        "workbox-broadcast-update": "^5.1.4",
        "workbox-cacheable-response": "^5.1.4",
        "workbox-core": "^5.1.4",
        "workbox-expiration": "^5.1.4",
        "workbox-google-analytics": "^5.1.4",
        "workbox-navigation-preload": "^5.1.4",
        "workbox-precaching": "^5.1.4",
        "workbox-range-requests": "^5.1.4",
        "workbox-routing": "^5.1.4",
        "workbox-strategies": "^5.1.4",
        "workbox-streams": "^5.1.4",
        "yup": "^0.32.9"

Where communities thrive

People

Repo info

Activity