Skip to content

Commit 5e3778c

Browse files
cabljaccabljac
committed
refactor(examples): made kitchen-sink example
1 parent 2589791 commit 5e3778c

22 files changed

+634
-148
lines changed

‎examples/react/kitchen-sink/README.md‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
# TanStack Query Firebase Examples
2+
3+
A comprehensive example application showcasing various TanStack Query Firebase hooks and patterns.
4+
5+
## Features
6+
7+
- **Authentication Examples**: ID token management with `useGetIdTokenQuery`
8+
- **Firestore Examples**: Collection querying with `useCollectionQuery`
9+
- **Real-time Updates**: See how the UI updates when data changes
10+
- **Mutation Integration**: Add/delete operations with proper error handling
11+
- **Loading States**: Proper loading and error state management
12+
- **Query Key Management**: Dynamic query keys based on filters
13+
14+
## Running the Examples
15+
16+
1. Start the Firebase emulators:
17+
```bash
18+
cd ../../../ && firebase emulators:start
19+
```
20+
21+
2. In another terminal, run the example app:
22+
```bash
23+
pnpm dev:emulator
24+
```
25+
26+
3. Navigate to different examples using the navigation bar:
27+
- **Home**: Overview of available examples
28+
- **ID Token Query**: Firebase Authentication token management
29+
- **Collection Query**: Firestore collection querying with filters
30+
31+
## Key Concepts Demonstrated
32+
33+
- Using `useGetIdTokenQuery` for Firebase Authentication
34+
- Using `useCollectionQuery` with different query configurations
35+
- Combining queries with mutations (`useAddDocumentMutation`, `useDeleteDocumentMutation`)
36+
- Dynamic query keys for filtered results
37+
- Proper TypeScript integration with Firestore data
38+
- React Router for navigation between examples
39+
40+
## File Structure
41+
42+
```
43+
src/
44+
├── components/
45+
│ ├── IdTokenExample.tsx # Authentication example
46+
│ └── CollectionQueryExample.tsx # Firestore example
47+
├── App.tsx # Main app with routing
48+
├── firebase.ts # Firebase initialization
49+
├── main.tsx # Entry point
50+
└── index.css # Tailwind CSS
51+
```
52+
53+
## Technologies Used
54+
55+
- **Vite**: Fast build tool and dev server
56+
- **React Router**: Client-side routing
57+
- **TanStack Query**: Data fetching and caching
58+
- **Firebase**: Authentication and Firestore
59+
- **Tailwind CSS**: Utility-first styling
60+
- **TypeScript**: Type safety

‎examples/react/useGetIdTokenQuery/index.html‎ renamed to ‎examples/react/kitchen-sink/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Vite + React + TS</title>
7+
<title>TanStack Query Firebase Examples</title>
88
</head>
99
<body>
1010
<div id="root"></div>

‎examples/react/useGetIdTokenQuery/package.json‎ renamed to ‎examples/react/kitchen-sink/package.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
{
2-
"name": "useGetIdTokenQuery",
2+
"name": "firebase-examples",
33
"private": true,
44
"version": "0.0.0",
55
"type": "module",
66
"scripts": {
77
"dev": "vite",
8-
"dev:emulator": "cd ../../../ && firebase emulators:exec --project test-project 'cd examples/react/useGetIdTokenQuery && vite'",
8+
"dev:emulator": "cd ../../../ && firebase emulators:exec --project test-project 'cd examples/react/firebase-examples && vite'",
99
"build": "npx vite build",
1010
"preview": "vite preview"
1111
},
@@ -15,7 +15,8 @@
1515
"@tanstack/react-query-devtools": "^5.84.2",
1616
"firebase": "^11.3.1",
1717
"react": "^19.1.1",
18-
"react-dom": "^19.1.1"
18+
"react-dom": "^19.1.1",
19+
"react-router-dom": "^6.28.0"
1920
},
2021
"devDependencies": {
2122
"@types/react": "^19.1.9",

‎examples/react/useGetIdTokenQuery/postcss.config.js‎ renamed to ‎examples/react/kitchen-sink/postcss.config.js‎

File renamed without changes.

‎examples/react/kitchen-sink/src/App.tsx‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
2+
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
3+
import { useState } from "react";
4+
import { Routes, Route, Link, useLocation } from "react-router-dom";
5+
import { IdTokenExample } from "./components/IdTokenExample";
6+
import { CollectionQueryExample } from "./components/CollectionQueryExample";
7+
8+
import "./firebase";
9+
10+
function App() {
11+
const [queryClient] = useState(
12+
() =>
13+
new QueryClient({
14+
defaultOptions: {
15+
queries: {
16+
staleTime: 60 * 1000,
17+
},
18+
},
19+
})
20+
);
21+
22+
return (
23+
<QueryClientProvider client={queryClient}>
24+
<div className="min-h-screen bg-gray-50">
25+
<Navigation />
26+
<div className="py-12">
27+
<div className="max-w-6xl mx-auto px-4">
28+
<Routes>
29+
<Route path="/" element={<Home />} />
30+
<Route path="/auth/id-token" element={<IdTokenExample />} />
31+
<Route
32+
path="/firestore/collection-query"
33+
element={<CollectionQueryExample />}
34+
/>
35+
</Routes>
36+
</div>
37+
</div>
38+
</div>
39+
<ReactQueryDevtools initialIsOpen={false} />
40+
</QueryClientProvider>
41+
);
42+
}
43+
44+
function Navigation() {
45+
const location = useLocation();
46+
47+
const navItems = [
48+
{ path: "/", label: "Home" },
49+
{ path: "/auth/id-token", label: "ID Token Query" },
50+
{ path: "/firestore/collection-query", label: "Collection Query" },
51+
];
52+
53+
return (
54+
<nav className="bg-white shadow-sm border-b">
55+
<div className="max-w-6xl mx-auto px-4">
56+
<div className="flex items-center justify-between h-16">
57+
<div className="flex items-center space-x-8">
58+
<h1 className="text-xl font-bold text-gray-900">
59+
TanStack Query Firebase
60+
</h1>
61+
<div className="flex space-x-4">
62+
{navItems.map((item) => (
63+
<Link
64+
key={item.path}
65+
to={item.path}
66+
className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
67+
location.pathname === item.path
68+
? "bg-blue-100 text-blue-700"
69+
: "text-gray-600 hover:text-gray-900 hover:bg-gray-100"
70+
}`}
71+
>
72+
{item.label}
73+
</Link>
74+
))}
75+
</div>
76+
</div>
77+
</div>
78+
</div>
79+
</nav>
80+
);
81+
}
82+
83+
function Home() {
84+
return (
85+
<div className="text-center">
86+
<h1 className="text-4xl font-bold text-gray-900 mb-4">
87+
TanStack Query Firebase Examples
88+
</h1>
89+
<p className="text-xl text-gray-600 mb-8">
90+
Explore different Firebase hooks and patterns with TanStack Query
91+
</p>
92+
93+
<div className="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto">
94+
<div className="bg-white rounded-lg shadow-md p-6">
95+
<h2 className="text-2xl font-bold text-gray-900 mb-4">
96+
Authentication
97+
</h2>
98+
<p className="text-gray-600 mb-4">
99+
Examples of Firebase Authentication hooks including ID token
100+
management.
101+
</p>
102+
<Link
103+
to="/auth/id-token"
104+
className="inline-block bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors"
105+
>
106+
View ID Token Example
107+
</Link>
108+
</div>
109+
110+
<div className="bg-white rounded-lg shadow-md p-6">
111+
<h2 className="text-2xl font-bold text-gray-900 mb-4">Firestore</h2>
112+
<p className="text-gray-600 mb-4">
113+
Examples of Firestore hooks for querying collections and documents.
114+
</p>
115+
<Link
116+
to="/firestore/collection-query"
117+
className="inline-block bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 transition-colors"
118+
>
119+
View Collection Query Example
120+
</Link>
121+
</div>
122+
</div>
123+
124+
<div className="mt-12 text-center">
125+
<p className="text-gray-500">
126+
Built with Vite, TanStack Query, React Router, and Firebase
127+
</p>
128+
</div>
129+
</div>
130+
);
131+
}
132+
133+
export default App;

0 commit comments

Comments
 (0)