react-query-firebase
react-query-firebase copied to clipboard
[Question] Dependant queries and paths
I was wondering how you are dealing with a segment of the path being undefined on the first render when one refreshes the page or opens a copy pasted deep link in a new tab
I just did it like this, but im sure there must be a better pattern?
const useGetItem = ({ id = '' }) => {
const { user } = useAuth();
// Necesary evil for now because the query value of nextjs router is initially empty and rules of hooks discourage conditional calling.
const path = user?.uid ? `users/${user?.uid}/items/${id}` : 'users/1';
const itemDocReference = doc(firestore, path).withConverter(ItemConverter);
return useFirestoreDocumentData(
['item', id],
itemDocReference,
{ idField: 'id' },
{ enabled: !!user?.uid }
);
};
const useGetUser = () => {
const { user } = useAuth();
const userDocReference = doc(firestore, `users/${user?.uid}`).withConverter(
UserConverter
);
return useFirestoreDocumentData(
['users'],
userDocReference,
{
idField: 'uid'
},
{
enabled: !!user?.uid
}
);
};
Struggling with this now, too.
React query documentation on dependent queries says it's enough to set the enabled flag and pass that userId as a key, which might cut down on your code.
Problem is that this library just isnt behaving in the normal react-query way
Maybe we could make the reference argument take a function too, so it's only called when executed? Should prevent this from being an issue then I think.