DEV Community

Sameer Ali
Sameer Ali

Posted on

Effortless Firestore Queries in React with React Query

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
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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


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)