Firestore with react-query-firebase

In the previous article we set up authentication and now we're ready to add the business and UI logic. link to previous project

first things first we need

typescript

1npm i @react-query-firebase/firestore dayjs date-fns 
2react-day-picker uniqid
3
4npm i -D @types/dayjs @types/uniqid"
5

repo link setting up firebase emulator react-query-firebase docs page

tips for this project

>react-query-firebase has many hooks for all kinds of operations >finding the right one is as important as solving the problem

for example

typescript

1const query = useFirestoreQuery(["projects"], ref,{
2subscribe:true
3});
4
5const snapshot = query.data;
6
7return snapshot.docs.map((docSnapshot) => {
8  const data = docSnapshot.data();
9  return <div key={docSnapshot.id}>{data.name}</div>;
10});

this is the hooks for querying a collection with the optional subscribe setting for realtime updates , it's off by default. This hook returns a snapshot which can be full of classes we don't directly need in our project and makes it really hard to manually manage cache on data mutation.

Luckily they have a hook to fetch only the data which was exactly what i needed

typescript

1const query = useFirestoreQueryData(["projects"], ref,{
2subscribe:true
3});
4
5return query.data.map((document) => {
6  return <div key={document.id}>{document.name}</div>;
7});

like i mentioned earlier react-query does some smart cache management in the backrground to ensure a query isn't ran unless if the data at hand is stale

there's a function invoked on mutate to append the new item to te cache until the next refetch to avoid refetching after every mutation as you'll notice in the code

typescript

1  const id = uniqid();
2  const ProjectRef = doc(db, "projects", id);
3  const mutationProject = useFirestoreDocumentMutation(
4    ProjectRef,
5    { merge: true },
6    {
7      onMutate: async (newProject) => {
8        // Cancel any outgoing refetches (so they don't overwrite our optimistic update)
9        await queryClient.cancelQueries("projects");
10        // Snapshot the previous value
11        const previousTodos = queryClient.getQueryData("projects");
12        // Optimistically update to the new value
13        //@ts-ignore
14        queryClient.setQueryData("projects", (old) => [...old, newProject]);
15        // Return a context object with the snapshotted value
16        return { previousTodos };
17      },
18      // If the mutation fails, use the context returned from onMutate to roll back
19      onError: (err, newTodo, context) => {
20        //@ts-ignore
21        queryClient.setQueryData("projects", context.previousTodos);
22      },
23      // Always refetch after error or success:
24      onSettled: () => {
25        queryClient.invalidateQueries("projects");
26      },
27    }
28  );
29

Firestore with react-query-firebase

React devs KE 🇰🇪 Meetup February 2025 | Crafting Reusable Code with React & TypeScript: From Design to NPM

Tanstack DB in action

Reasons to Still Use Next.js from a TanStack Start Enjoyer

Firestore with react-query-firebase

React devs KE 🇰🇪 Meetup February 2025 | Crafting Reusable Code with React & TypeScript: From Design to NPM

Tanstack DB in action

Reasons to Still Use Next.js from a TanStack Start Enjoyer

More posts

React devs KE 🇰🇪 Meetup February 2025 | Crafting Reusable Code with React & TypeScript: From Design to NPM

Tanstack DB in action

Reasons to Still Use Next.js from a TanStack Start Enjoyer

More posts

React devs KE 🇰🇪 Meetup February 2025 | Crafting Reusable Code with React & TypeScript: From Design to NPM

Tanstack DB in action

Reasons to Still Use Next.js from a TanStack Start Enjoyer