refactor(examples): update collection query to invalidate queries

Author: cabljac

examples/react/kitchen-sink/src/components/CollectionQueryExample.tsx

@@ -1,3 +1,4 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import {
   useAddDocumentMutation,
   useCollectionQuery,
@@ -8,6 +9,7 @@ import {
   doc,
   getFirestore,
   query,
+  Timestamp,
   where,
 } from "firebase/firestore";
 import { useState } from "react";
@@ -17,7 +19,7 @@ interface Task {
   title: string;
   completed: boolean;
   priority: "low" | "medium" | "high";
-  createdAt: Date;
+  createdAt: Timestamp | Date;
 }
 
 export function CollectionQueryExample() {
@@ -26,6 +28,7 @@ export function CollectionQueryExample() {
     useState<Task["priority"]>("medium");
   const [filterCompleted, setFilterCompleted] = useState<boolean | null>(null);
 
+  const queryClient = useQueryClient();
   const firestore = getFirestore();
   const tasksCollection = collection(firestore, "tasks");
 
@@ -45,8 +48,13 @@ export function CollectionQueryExample() {
     queryKey: ["tasks", filterCompleted],
   });
 
-  // Add task mutation
-  const addTaskMutation = useAddDocumentMutation(tasksCollection);
+  // Add task mutation with query invalidation
+  const addTaskMutation = useAddDocumentMutation(tasksCollection, {
+    onSuccess: () => {
+      // Invalidate all task queries after successful add
+      queryClient.invalidateQueries({ queryKey: ["tasks"] });
+    },
+  });
 
   const handleAddTask = async () => {
     if (!newTaskTitle.trim()) return;
@@ -76,10 +84,21 @@ export function CollectionQueryExample() {
     console.log(`Would toggle task ${taskId} to ${!currentCompleted}`);
   };
 
+  // Use a mutation for delete with dynamic document reference TODO: why doesn't the library support dynamic document reference?
+  const deleteTaskMutation = useMutation({
+    mutationFn: async (taskId: string) => {
+      const taskRef = doc(firestore, "tasks", taskId);
+      await deleteDoc(taskRef);
+    },
+    onSuccess: () => {
+      // Invalidate all task queries after successful delete
+      queryClient.invalidateQueries({ queryKey: ["tasks"] });
+    },
+  });
+
   const handleDeleteTask = async (taskId: string) => {
-    const taskRef = doc(firestore, "tasks", taskId);
     try {
-      await deleteDoc(taskRef);
+      await deleteTaskMutation.mutateAsync(taskId);
     } catch (error) {
       console.error("Failed to delete task:", error);
     }
@@ -252,7 +271,12 @@ export function CollectionQueryExample() {
                       {task.title}
                     </h4>
                     <p className="text-sm text-gray-500">
-                      Created: {task.createdAt.toLocaleDateString()}
+                      Created:{" "}
+                      {task.createdAt instanceof Timestamp
+                        ? task.createdAt.toDate().toLocaleDateString()
+                        : task.createdAt instanceof Date
+                          ? task.createdAt.toLocaleDateString()
+                          : "Unknown date"}
                     </p>
                   </div>
                   <span

examples/react/kitchen-sink/src/components/WithConverterExample.tsx

@@ -19,7 +19,7 @@ const productConverter = {
   },
   fromFirestore(
     snapshot: QueryDocumentSnapshot,
-    options: SnapshotOptions,
+    options: SnapshotOptions
   ): Product {
     const data = snapshot.data(options);
     return {
@@ -32,10 +32,13 @@ const productConverter = {
 export function WithConverterExample() {
   const firestore = getFirestore();
   const ref = query(
-    collection(firestore, "products").withConverter(productConverter),
+    collection(firestore, "products").withConverter(productConverter)
   );
 
-  const { data, isLoading, isError, error } = useCollectionQuery(ref, {
+  const { data, isLoading, isError, error } = useCollectionQuery<
+    Product,
+    DocumentData
+  >(ref, {
     queryKey: ["products"],
   });
 

examples/react/kitchen-sink/src/firebase.ts

@@ -4,7 +4,7 @@ import { connectFirestoreEmulator, getFirestore } from "firebase/firestore";
 
 if (getApps().length === 0) {
   initializeApp({
-    projectId: "example",
+    projectId: "test-project",
     apiKey: "demo-api-key", // Required for Firebase to initialize
   });
 

examples/react/kitchen-sink/tsconfig.json

@@ -18,7 +18,10 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+
+    /* Types */
+    "types": ["vite/client"]
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]