Token hash: {token ? `${btoa(token).slice(0, 16)}...` : ""}
{lastRefreshTime && (
@@ -170,7 +170,7 @@ export function IdTokenExample() {
Loading fresh token...
-
+
Token hash:{" "}
{freshToken ? `${btoa(freshToken).slice(0, 16)}...` : ""}
diff --git a/examples/react/kitchen-sink/src/components/NestedCollectionsExample.tsx b/examples/react/kitchen-sink/src/components/NestedCollectionsExample.tsx
new file mode 100644
index 00000000..79fd2299
--- /dev/null
+++ b/examples/react/kitchen-sink/src/components/NestedCollectionsExample.tsx
@@ -0,0 +1,606 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import {
+ useAddDocumentMutation,
+ useCollectionQuery,
+} from "@tanstack-query-firebase/react/firestore";
+import {
+ addDoc,
+ collection,
+ deleteDoc,
+ doc,
+ getFirestore,
+ limit,
+ orderBy,
+ query,
+ updateDoc,
+ where,
+} from "firebase/firestore";
+import { useState } from "react";
+
+interface ChatMessage {
+ id: string;
+ text: string;
+ senderId: string;
+ senderName: string;
+ timestamp: Date;
+}
+
+interface Conversation {
+ id: string;
+ topic: string;
+ description: string;
+ members: string[];
+ isConcluded: boolean;
+ createdAt: Date;
+ lastMessageAt: Date;
+ chatMessages?: ChatMessage[];
+}
+
+export function NestedCollectionsExample() {
+ const [newConversationTopic, setNewConversationTopic] = useState("");
+ const [newConversationDescription, setNewConversationDescription] =
+ useState("");
+ const [selectedConversationId, setSelectedConversationId] = useState<
+ string | null
+ >(null);
+ const [newMessageText, setNewMessageText] = useState("");
+ const [filterConcluded, setFilterConcluded] = useState
(null);
+
+ const queryClient = useQueryClient();
+ const firestore = getFirestore();
+ const conversationsCollection = collection(firestore, "conversations");
+
+ // Query conversations with real-time updates
+ const conversationsQuery =
+ filterConcluded !== null
+ ? query(
+ conversationsCollection,
+ where("isConcluded", "==", filterConcluded),
+ orderBy("lastMessageAt", "desc"),
+ )
+ : query(conversationsCollection, orderBy("lastMessageAt", "desc"));
+
+ const {
+ data: conversationsSnapshot,
+ isLoading: conversationsLoading,
+ isError: conversationsError,
+ error: conversationsErrorData,
+ } = useCollectionQuery(conversationsQuery, {
+ queryKey: ["conversations", filterConcluded],
+ subscribed: true, // Enable real-time updates
+ });
+
+ // Query chat messages for selected conversation with real-time updates
+ const chatMessagesQuery = selectedConversationId
+ ? query(
+ collection(
+ firestore,
+ "conversations",
+ selectedConversationId,
+ "chatMessages",
+ ),
+ orderBy("timestamp", "asc"),
+ limit(50),
+ )
+ : null;
+
+ const {
+ data: messagesSnapshot,
+ isLoading: messagesLoading,
+ isError: messagesError,
+ error: messagesErrorData,
+ } = useCollectionQuery(chatMessagesQuery!, {
+ queryKey: ["chatMessages", selectedConversationId],
+ enabled: !!selectedConversationId && !!chatMessagesQuery,
+ subscribed: true, // Enable real-time updates
+ });
+
+ // Mutations
+ const addConversationMutation = useAddDocumentMutation(
+ conversationsCollection,
+ {
+ onSuccess: () => {
+ // Invalidate conversations query to refresh the list
+ queryClient.invalidateQueries({ queryKey: ["conversations"] });
+ },
+ onError: (error) => {
+ console.error("Failed to add conversation:", error);
+ // Could show a toast notification here
+ },
+ },
+ );
+
+ // Custom mutation for adding messages with proper invalidation
+ const addMessageMutation = useMutation({
+ mutationFn: async (newMessage: Omit) => {
+ if (!selectedConversationId) {
+ throw new Error("No conversation selected");
+ }
+ const messagesCollection = collection(
+ firestore,
+ "conversations",
+ selectedConversationId,
+ "chatMessages",
+ );
+ return addDoc(messagesCollection, newMessage);
+ },
+ onMutate: async (newMessage) => {
+ // Cancel in-flight queries
+ await queryClient.cancelQueries({
+ queryKey: ["chatMessages", selectedConversationId],
+ });
+
+ // Store the actual snapshot structure
+ const previousSnapshot = queryClient.getQueryData([
+ "chatMessages",
+ selectedConversationId,
+ ]);
+
+ // Create a temporary message with proper structure
+ const tempMessage = {
+ id: `temp-${Date.now()}`,
+ ...newMessage,
+ timestamp: new Date(),
+ };
+
+ // Update maintaining the snapshot structure
+ queryClient.setQueryData(
+ ["chatMessages", selectedConversationId],
+ (old: any) => {
+ if (!old) return old;
+
+ // Create a new doc-like object
+ const newDoc = {
+ id: tempMessage.id,
+ data: () => tempMessage,
+ // Include other doc methods if needed
+ };
+
+ return {
+ ...old,
+ docs: [...(old.docs || []), newDoc],
+ };
+ },
+ );
+
+ return { previousSnapshot };
+ },
+ onError: (error, _variables, context) => {
+ // Show user-friendly error message
+ console.error("Failed to send message:", error);
+ // Could show a toast notification here
+
+ // Rollback optimistic update
+ if (context?.previousSnapshot) {
+ queryClient.setQueryData(
+ ["chatMessages", selectedConversationId],
+ context.previousSnapshot,
+ );
+ }
+ },
+ onSuccess: async () => {
+ // Update conversation's lastMessageAt
+ if (selectedConversationId) {
+ try {
+ await updateDoc(
+ doc(firestore, "conversations", selectedConversationId),
+ {
+ lastMessageAt: new Date(),
+ },
+ );
+ } catch (error) {
+ console.error("Failed to update conversation timestamp:", error);
+ }
+ }
+
+ // Invalidate both queries
+ queryClient.invalidateQueries({ queryKey: ["conversations"] });
+ queryClient.invalidateQueries({
+ queryKey: ["chatMessages", selectedConversationId],
+ });
+ },
+ });
+
+ // Custom mutation for deleting conversations
+ const deleteConversationMutation = useMutation({
+ mutationFn: async (conversationId: string) => {
+ const conversationRef = doc(firestore, "conversations", conversationId);
+ return deleteDoc(conversationRef);
+ },
+ onError: (error, _conversationId) => {
+ console.error("Failed to delete conversation:", error);
+ // Could show a toast notification here
+ },
+ onSuccess: (_, conversationId) => {
+ // Invalidate conversations query
+ queryClient.invalidateQueries({ queryKey: ["conversations"] });
+
+ // Clear messages if this was the selected conversation
+ if (selectedConversationId === conversationId) {
+ queryClient.removeQueries({
+ queryKey: ["chatMessages", conversationId],
+ });
+ setSelectedConversationId(null);
+ }
+ },
+ });
+
+ const handleAddConversation = async () => {
+ if (!newConversationTopic.trim()) return;
+
+ const newConversation = {
+ topic: newConversationTopic.trim(),
+ description: newConversationDescription.trim(),
+ members: ["user1", "user2"], // In real app, this would be actual user IDs
+ isConcluded: false,
+ createdAt: new Date(),
+ lastMessageAt: new Date(),
+ };
+
+ try {
+ await addConversationMutation.mutateAsync(newConversation);
+ setNewConversationTopic("");
+ setNewConversationDescription("");
+ } catch (error) {
+ console.error("Failed to add conversation:", error);
+ }
+ };
+
+ const handleAddMessage = async () => {
+ if (!selectedConversationId || !newMessageText.trim()) return;
+
+ const newMessage = {
+ text: newMessageText.trim(),
+ senderId: "user1", // In real app, this would be the current user's ID
+ senderName: "Current User",
+ timestamp: new Date(),
+ };
+
+ try {
+ await addMessageMutation.mutateAsync(newMessage);
+ setNewMessageText("");
+ } catch (error) {
+ console.error("Failed to add message:", error);
+ }
+ };
+
+ const handleDeleteConversation = async (conversationId: string) => {
+ try {
+ await deleteConversationMutation.mutateAsync(conversationId);
+ } catch (error) {
+ console.error("Failed to delete conversation:", error);
+ }
+ };
+
+ // Proper date serialization
+ const conversations =
+ (conversationsSnapshot?.docs.map((doc) => ({
+ id: doc.id,
+ ...doc.data(),
+ // Convert Firestore Timestamps to Dates
+ createdAt:
+ doc.data().createdAt?.toDate?.() || doc.data().createdAt || new Date(),
+ lastMessageAt:
+ doc.data().lastMessageAt?.toDate?.() ||
+ doc.data().lastMessageAt ||
+ new Date(),
+ })) as Conversation[]) || [];
+
+ const messages =
+ (messagesSnapshot?.docs.map((doc) => ({
+ id: doc.id,
+ ...doc.data(),
+ // Convert Firestore Timestamps to Dates
+ timestamp:
+ doc.data().timestamp?.toDate?.() || doc.data().timestamp || new Date(),
+ })) as ChatMessage[]) || [];
+
+ const selectedConversation = conversations.find(
+ (conv) => conv.id === selectedConversationId,
+ );
+
+ return (
+
+
+ Nested Collections: Conversations & Chat Messages
+
+
+ {/* Add Conversation Form */}
+
+
Add New Conversation
+
+
+
+ setNewConversationTopic(e.target.value)}
+ placeholder="Enter conversation topic..."
+ className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+ onKeyPress={(e) => e.key === "Enter" && handleAddConversation()}
+ />
+
+
+
+ setNewConversationDescription(e.target.value)}
+ placeholder="Enter description..."
+ className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+ />
+
+
+
+
+
+ {/* Filter Controls */}
+
+ Filter:
+
+
+
+
+
+
+ {/* Conversations List */}
+
+
Conversations
+
+ {conversationsLoading && (
+
+
+
Loading conversations...
+
+ )}
+
+ {conversationsError && (
+
+
+ Error loading conversations
+
+
+ {conversationsErrorData?.message || "An unknown error occurred"}
+
+
+ )}
+
+ {!conversationsLoading && !conversationsError && (
+
+ {conversations.length === 0 ? (
+
+ No conversations found. Add your first conversation above!
+
+ ) : (
+ conversations.map((conversation) => (
+
+ ))
+ )}
+
+ )}
+
+
+ {/* Chat Messages */}
+
+
+ {selectedConversation
+ ? `Chat: ${selectedConversation.topic}`
+ : "Select a conversation"}
+
+
+ {selectedConversationId ? (
+ <>
+ {messagesLoading && (
+
+
+
Loading messages...
+
+ )}
+
+ {messagesError && (
+
+
+ Error loading messages
+
+
+ {messagesErrorData?.message || "An unknown error occurred"}
+
+
+ )}
+
+ {!messagesLoading && !messagesError && (
+ <>
+ {/* Messages List */}
+
+ {messages.length === 0 ? (
+
+ No messages yet. Start the conversation!
+
+ ) : (
+ messages.map((message) => (
+
+
+
+ {message.senderName}
+
+
+ {message.timestamp.toLocaleTimeString()}
+
+
+
{message.text}
+
+ ))
+ )}
+
+
+ {/* Add Message Form */}
+
+ setNewMessageText(e.target.value)}
+ placeholder="Type a message..."
+ className="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+ onKeyPress={(e) =>
+ e.key === "Enter" && handleAddMessage()
+ }
+ />
+
+
+
+ )}
+
+ ) : (
+
+ Select a conversation to view messages
+
+ )}
+
+
+
+ {/* Query Info */}
+
+
Query Information
+
+
+ Conversations Query Key:{" "}
+ {JSON.stringify(["conversations", filterConcluded])}
+
+
+ Messages Query Key:{" "}
+ {selectedConversationId
+ ? JSON.stringify(["chatMessages", selectedConversationId])
+ : "Not selected"}
+
+
+ Total Conversations: {conversations.length}
+
+
+ Total Messages: {messages.length}
+
+
+ Filter:{" "}
+ {filterConcluded === null
+ ? "All"
+ : filterConcluded
+ ? "Concluded"
+ : "Active"}
+
+
+ Real-time Updates: Enabled for both queries
+
+
+ Optimistic Updates: Enabled for message additions
+
+
+ Query Invalidation: Automatic after mutations
+
+
+ Error Handling: Rollback on mutation failures
+
+
+
+
Loading...
;
+ }
+
+ if (isError) {
+ return Error: {error?.message}
;
+ }
+
+ const products = data?.docs.map((doc) => doc.data()) ?? [];
+
+ return (
+
+
Products
+
+ {products.map((product) => (
+ -
+ {product.name} - ${product.price}
+
+ ))}
+
+
-
-
-
- Firebase Authentication Examples
-
-
- TanStack Query Firebase Authentication hooks and patterns
-
-
-
-
-
-
-
-
-
- Built with Vite, TanStack Query, and Firebase Auth
-
-
-
-