Effortless Firestore Queries in React with React Query
If you're working with Firebase Firestore and React, you probably love the simplicity of Firebase — but not necessarily the mess of onSnapshot
, manual state management, or stale data.
As someone building modern apps with the MERN stack, I wanted a way to use Firestore like a boss — with real-time updates, caching, and minimal boilerplate.
So I built react-firestore-query
What is react-firestore-query
?
react-firestore-query
is a simple, powerful React hook that connects Firestore queries with React Query.
It gives you:
- Real-time sync via Firestore's
onSnapshot
- Automatic caching using React Query
- Suspense and SSR compatibility
- TypeScript support out of the box
You just pass in a Firestore query (like query(collection(db, 'users'))
), and it returns live, cached data — with error/loading states managed for you.
Installation
npm install react-firestore-query
Why Not Use react-firebase-hooks
?
Good question!
While react-firebase-hooks
is awesome, it doesn't integrate with React Query — which means:
- No unified cache
- No global devtools
- No offline-first support
- No custom stale times or retry logic
With react-firestore-query
, you're combining Firebase's real-time power with React Query’s full ecosystem.
Example: Fetch Active Users in Real-Time
import { useFirestoreQuery } from 'react-firestore-query';
import { collection, query, where } from 'firebase/firestore';
import { db } from './firebase';
const usersQuery = query(collection(db, 'users'), where('active', '==', true));
export default function ActiveUsers() {
const { data, isLoading, error } = useFirestoreQuery(['users', 'active'], usersQuery);
if (isLoading) return <p>Loading...</p>;
if (error) return <p>Error: {error.message}</p>;
return (
<ul>
{data?.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}
It’s that simple.
No manual subscriptions. No useEffect
. No state juggling.
How It Works (Under the Hood)
- Uses Firestore's
onSnapshot()
for real-time data - Wraps it in a React Query
useQuery()
hook - Cleans up listeners on unmount
- Automatically updates cache when data changes
You can even pass queryKey
dependencies to manage separate cache buckets — just like in React Query.
Docs & GitHub
- GitHub: https://github.com/sameer52718/react-firestore-query
- npm: https://www.npmjs.com/package/react-firestore-query
Try It Out, Star It, Share It
This package is still growing — and I’d love your feedback, issues, PRs, or just a star.
If you're building with Firebase + React, give react-firestore-query
a try.
Let’s make Firestore a little more fun to work with.
Thanks for reading!
Follow me for more React + Firebase dev tips.
Top comments (0)