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
@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.
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.
export default connect((state, {todoId}) => ({ todoData: state.firebase.data.todos[todoId] }))(Component)
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.
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);
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
.firestoreConnect
, if you do the first part as I said, you need to access doc id from props.profile.company
.firebase.profile
which you need to wait for it to have its value first, then you can return both the queries.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)
const rootReducer = combineReducers({
firebase: firebaseReducer,
firestore: firestoreReducer,
tripCriteria,
tripResults,
selectedCurrency,
authWall,
onboarding,
selectedTrip,
userData,
embeddedProfile
})
const persistConfig = {
key: 'root',
storage,
blacklist: ['tripResults', 'embeddedProfile']
}