redux-firestore/Lobby

Yash Ahuja

@samsoul16

Can someone help me just get a particular document from firestore.
@illuminist I'm using the useFirestoreConnect hook too :

const gId = "6IY8IFS9";

const Game = props => {
    const firestore = useFirestore();
    useFirestoreConnect("games/${gId}");

    const game = useSelector(state => state.firestore.data.games[gId]);
    if (game) console.log("Output: game", game);

I get an error :

Uncaught TypeError: Cannot read property '6IY8IFS9' of undefined
    at Function.mapToProps (Game.js:77)

Instead of useSelector i also tried connect as in your example here, prescottprue/react-redux-firebase#684

export default connect(state => ({ game: state.firestore.data.games[gId] }))(
    Game
);

still same error!

if i just do

userFirestoreConnect("games");
const games = useSelector(state => state.firestore.data.games);
if (games) console.log("Output: games", games);

it works perfectly

My Firestore Structure

illuminist

@illuminist

@samsoul16 First,

useFirestoreConnect(`games/${gId}`)

it needed to be grave accemt in order to use ${...} which is javascript string templete feature.
So that it you use single quote or double quote like "games/${gId}" it will be just games/${gId}. In the other hand, using grave accent js will interprets it to games/6IY8IFS9
Second, because of state.firestore.data.games initially will be undefined before a data arrive, hence TypeError is thrown. You need to make sure that your code can handle the empty data before loading too. My usual to go code is const game = useSelector(state => _.get(state, ['firestore', 'data', 'games', gId])), utilizing lodash's get will just return undefined even if some of the deeper property cannot be accessed. This doesn't only apply to the new hook API but you should have already done the same when implement with HOC.

Yash Ahuja

@samsoul16

Thanks @illuminist for the hint to using ` instead of "

Also thanks for the solution, now i will use this :
const game = useSelector(state => _.get(state, ['firestore', 'data', 'games', gId]))

But i think it should have been mentioned somewhere in docs to use _.get instead of directly accessing as it can lead to questions for alot of people.

because even in the examples it has directly been mentioned to use it directly instead. export default connect((state, {todoId}) => ({ todoData: state.firebase.data.todos[todoId] }))(Component)

illuminist

@illuminist

My first thought is because of it being a separated library so I decided to not put it there. But I forgot to mention about the data is initially empty. So I think I will change it the example to match the usage of original firestoreConnect

useSelector(({firestore: { data }}) => data.games && data.games[gId] ))

This code is taken from an original example before I implement hooks.

Yash Ahuja

@samsoul16

Thank you for your prompt replies. Help me alot :)

Matias Paavilainen

@masagameplay

Is there any reason why firestore populate (v0.8.0) breaks data loading in an other component (not using populate in there)

Matias Paavilainen

@masagameplay

does that populate method somehow override something?

nvm I fixed the issue with storeAs

joshuaaron

@joshuaaron

Hey all, I've setup a small typescript project using useFirestore and useFirestoreConnect. Currently they aren't added to the type dec files, and i've bypassed it with // @ts-ignore flags over the imports. Is there any timeline on when these might be added?

illuminist

@illuminist

Hi @joshuaaron, I worked on the hooks, but I haven't used typescript before so I don't know how to make type declaration. You can create PR to add them though. Feel free to ask me more information about those hooks.

joshuaaron

@joshuaaron

Hi @illuminist, I haven't done a type dec file myself but I might look into it and we could collab on doing this if needed?

illuminist

@illuminist

@joshuaaron Sure! I can provide datatype if you need.

Nick Fausnight

@nickfausnight

Hi! I appreciate all the work y'all do, the project looks great though I think I'm missing something. Could someone help me understand the right way to build queries (in v3)? I'm not quite sure of the right way to do things after reading the docs/examples.

In firestore, I have collections for users, companies, and work_orders, where users and work_orders reference companies for ownership. (I'm not tied to any structure if this is the wrong way to do things)

My goal here is to grab the user's company and that companies work orders

In my container I have:

export default compose(
  withFirebase,
  connect(({ firebase, firestore }) => ({
    firebase: firebase,
    firestore: firestore,
    companies: firestore.ordered.companies,
    work_orders: firestore.ordered.work_orders
  })),
  firestoreConnect((props) => {
    return [
        {
          collection: "companies",
          // Part where I'm thinking I'm mixed up
          doc: firebase.profile.company
        },
        {
          collection: "work_orders",
          where: [
              "company",
              "==",
              //  ?  something like profile.company
          ]
        }
    ];
  }),
)(WorkOrderList);

Am I on the right track here? I'd appreciate any help in getting going in the right direction!

Scott Prue

@prescottprue

@nickfausnight try placing a connect for companies and work orders after your listeners

Nick Fausnight

@nickfausnight

Thanks @prescottprue!

illuminist

@illuminist

@nickfausnight I see many wrong things in your code.

You must not return either state.firebase or state.firestore in connect by themselves. This will cause unnecessary re-render whenever their internal states are updated. The best practice for connect is to return only the deepest state value you need for the next component. Eg. if you need to use firebase.profile.company, returning state.firebase.profile in connect is more sufficient than returning a whole state.firebase.
In firestoreConnect, if you do the first part as I said, you need to access doc id from props.profile.company.
Beware of initial loading where the some data might hasn't arrive yet. If you has query that depend on data on firestore or another API, you need to conditionally return only a query that has a data ready for a complete query. In this case, both queries depend on firebase.profile which you need to wait for it to have its value first, then you can return both the queries.

Scott Prue

@prescottprue

Also, +1 to what @illuminist said

Nick Fausnight

@nickfausnight

@illuminist oops I missed this, thank you so much! That's a big help

Harrison Lo

@harrisonlo

What is a best way to implement offline support? Is it to integrate redux-persist or to enable persistence on Firestore? (which by the way, is it supported with redux-firestore? can't seem to find it)

Harrison Lo

@harrisonlo

Update: seems like Firestore persistence works pretty well. I wonder if there is a need for integrating redux-persist with react-redux-firebase

karam

@kmelkon

Hi all, I'm building a react native app with redux and cloud firestore, I managed to use firestoreConnect to load data from my collection but I can't figure out how to push/set documents on the same collection, what do I need to share so I can get help? Thanks

illuminist

@illuminist

@kmelkon You can use original firestore API to manipulate data normally

karam

@kmelkon

Ugh I was going the wrong way about fixing it, tried to call add from redux action creators
but calling onPress={() => props.firestore.add({ collection: 'workouts' }, { title })} just worked

Thanks a lot @illuminist but this means that I can't put logic into my action creators if I'm not mistaken

illuminist

@illuminist

No problem. It's usually fine to put logic in action creators though.

karam

@kmelkon

so I can pass the firestore prop to the action and use it to perform data operations in a thunk?

illuminist

@illuminist

You can get extended firestore instance with getFirestore function, this way you will be able to use firestore everywhere

karam

@kmelkon

Sorry for the questions, but I'm passing getFirestore from redux-firestore to thunk.withExtraArguments
then receive it in my action creator as (dispatch, getState, getFirestore) and when I call it I get an error:
Firebase instance does not exist yet, check your compose function

illuminist

@illuminist

getFirestore should be call inside of action creator though.

karam

@kmelkon

that's what I'm doing, calling it in the action creator

illuminist

@illuminist

Which version react-redux-firebase and redux-firestore are you using?

karam

@kmelkon

"redux-firestore": "^0.9.0",
"react-redux-firebase": "^3.0.3",

illuminist

@illuminist

@kmelkon Sorry for disappearance yesterday. You should try calling createFirestoreInstance manually. And also have to make sure that will be called before any getFirestore call

karam

@kmelkon

No worries, I just ended up passing the firestore object manually to my action creators as an argument

Michael Lake

@mlake

hey folks - I been using redux firestore for awhile, but not that i'm converting everything to react hooks, i'm using firestoreConnect for the first time

it seems to work except that I get an error in the console like this:

redux-persist/createPersistoid: error serializing state TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'FirebaseAppImpl'
    |     property 'firebase_' -> object with constructor 'Object'
    |     property 'apps' -> object with constructor 'Array'
    --- index 0 closes the circle
    at JSON.stringify (<anonymous>)
    at defaultSerialize (createPersistoid.js:126)
    at processNextKey (createPersistoid.js:71)

any ideas what might be causing this?

illuminist

@illuminist

Looks like you're trying to save firebase instance into persistent store. You should check that what are you putting in redux-persist

Michael Lake

@mlake

thanks for the pointer..

do think it might be this:

const rootReducer = combineReducers({
  firebase: firebaseReducer,
  firestore: firestoreReducer,
  tripCriteria,
  tripResults,
  selectedCurrency,
  authWall,
  onboarding,
  selectedTrip,
  userData,
  embeddedProfile
})

Michael Lake

@mlake

that whole createStore.js has always been a little difficult for me to digest..

Michael Lake

@mlake

so in copying the createStore.js from the example, I've got the error to go away, but I've got some other stuff in my old config (which I admittedly don't entirely comprehend...) that's needed because some other things are breaking..

like..where can I use my persistConfig?

const persistConfig = {
  key: 'root',
  storage,
  blacklist: ['tripResults', 'embeddedProfile']
}

illuminist

@illuminist

Try to blacklist firebase and firestore too?

Michael Lake

@mlake

I had tried that to no avail..

Where communities thrive

People

Repo info

Activity