Tanstack Query Bindings for FDC

dataconnect/app/package.json

@@ -11,8 +11,10 @@
   },
   "dependencies": {
     "@movie/dataconnect": "file:src/lib/dataconnect-sdk",
+    "@tanstack-query-firebase/react": "^1.0.4",
+    "@tanstack/react-query": "^5.62.16",
     "dotenv": "^16.4.5",
-    "firebase": "^10.14.0",
+    "firebase": "^11.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",

dataconnect/app/src/App.tsx

@@ -8,9 +8,13 @@ import VectorSearchPage from "./pages/VectorSearch";
 import AdvancedSearchPage from "./pages/AdvancedSearch";
 import NotFound from "./pages/NotFound";
 import RootLayout from "./layout/RootLayout";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const queryClient = new QueryClient();
 
 export default function App() {
   return (
+    <QueryClientProvider client={queryClient}>
     <Router>
       <RootLayout>
         <Routes>
@@ -24,5 +28,6 @@ export default function App() {
         </Routes>
       </RootLayout>
     </Router>
+    </QueryClientProvider>
   );
 }

dataconnect/app/src/components/carousel.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import MovieCard from '@/components/moviecard';
+import MovieCard from '@/components/moviecard.jsx';
 
 interface CarouselProps {
   title: string;

dataconnect/app/src/pages/Actor.tsx

@@ -4,16 +4,17 @@ import { onAuthStateChanged, User } from 'firebase/auth';
 import { AuthContext } from '@/lib/firebase';
 import NotFound from './NotFound';
 import { handleGetActorById } from '@/lib/MovieService';
+import { useDataConnectQuery } from '@tanstack-query-firebase/react/data-connect';
+import { getActorByIdRef } from '@/lib/dataconnect-sdk';
 
 export default function ActorPage() {
-  const navigate = useNavigate();
   const auth = useContext(AuthContext);
-  const [loading, setLoading] = useState(true);
   const { id } = useParams<{ id: string }>();
   const actorId = id || '';
   const [, setAuthUser] = useState<User | null>(null);
+  const { isLoading, data } = useDataConnectQuery(getActorByIdRef({ id: actorId }));
+  const actor = data?.actor;
 
-  const [actor, setActor] = useState(null);
 
   useEffect(() => {
     const unsubscribe = onAuthStateChanged(auth, (user) => {
@@ -25,23 +26,7 @@ export default function ActorPage() {
     return () => unsubscribe();
   }, [auth, actorId]);
 
-  useEffect(() => {
-    if (actorId) {
-      const fetchActor = async () => {
-        const actorData = await handleGetActorById(actorId);
-        if (actorData) {
-          setActor(actorData);
-        } else {
-          navigate('/not-found');
-        }
-        setLoading(false);
-      };
-
-      fetchActor();
-    }
-  }, [actorId, navigate]);
-
-  if (loading) return <p>Loading...</p>;
+  if (isLoading) return <p>Loading...</p>;
 
   return actor ? (
     <div className="container mx-auto p-4 bg-gray-900 min-h-screen text-white">

dataconnect/app/src/pages/Home.tsx

@@ -1,6 +1,7 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import Carousel from '@/components/carousel';
-import { handleGetTopMovies, handleGetLatestMovies } from '@/lib/MovieService';
+import { listMoviesRef, OrderDirection } from '@/lib/dataconnect-sdk';
+import { useDataConnectQuery } from '@tanstack-query-firebase/react/data-connect';
 
 const ConditionalRender = ({ condition, preferred, alternate }: { condition: boolean, preferred: React.ReactNode, alternate: React.ReactNode }) => (
   condition ? preferred : alternate
@@ -13,37 +14,21 @@ const PlaceholderMessage = () => (
 )
 
 export default function HomePage() {
-  const [topMovies, setTopMovies] = useState([]);
-  const [latestMovies, setLatestMovies] = useState([]);
-  const [needsToRunEmulators, setNeedsToRunEmulators] = useState(true);
-
-  useEffect(() => {
-    async function fetchMovies() {
-      const topMoviesData = await handleGetTopMovies(10);
-      const latestMoviesData = await handleGetLatestMovies(10);
-
-      // Or seed data
-      const shouldRunEmulators = topMoviesData.length === 0 && latestMoviesData.length === 0;
-      setNeedsToRunEmulators(shouldRunEmulators);
-
-      if (topMoviesData) setTopMovies(topMoviesData);
-      if (latestMoviesData) setLatestMovies(latestMoviesData);
-    }
-
-    fetchMovies();
-  }, []);
-
+  const { data: topMovies,  isLoading: loadingTopMovies } = useDataConnectQuery(listMoviesRef({ limit: 10, orderByRating: OrderDirection.DESC }));
+  const { data: latestMovies, isLoading: loadingLatestMovies } = useDataConnectQuery(listMoviesRef({ limit: 10, orderByReleaseYear: OrderDirection.DESC }));
+  const shouldRunEmulators = loadingLatestMovies || loadingTopMovies || topMovies?.movies.length === 0 && latestMovies?.movies.length === 0;
+
   const carousels = (
     <>
-      <Carousel title="Top 10 Movies" movies={topMovies} />
-      <Carousel title="Latest Movies" movies={latestMovies} />
+      <Carousel title="Top 10 Movies" movies={topMovies?.movies} />
+      <Carousel title="Latest Movies" movies={latestMovies?.movies} />
     </>
   )
 
   return (
     <div className="container mx-auto p-4 bg-gray-900 text-white shadow-md min-h-screen">
       <ConditionalRender 
-        condition={!needsToRunEmulators} 
+        condition={!shouldRunEmulators} 
         preferred={carousels} 
         alternate={<PlaceholderMessage />} />
     </div>

dataconnect/app/tsconfig.json

@@ -1,12 +1,11 @@
 {
   "compilerOptions": {
-    "baseUrl": ".",
     "paths": {
-      "@/lib/*": ["src/lib/*"],
-      "@/components/*": ["src/components/*"],
-      "@/assets/*": ["assets/*"],
-      "@/pages/*": ["src/pages/*"],
-      "@/layout/*": ["src/layout/*"],
+      "@/lib/*": ["./src/lib/*"],
+      "@/components/*": ["./src/components/*"],
+      "@/assets/*": ["./assets/*"],
+      "@/pages/*": ["./src/pages/*"],
+      "@/layout/*": ["./src/layout/*"],
     },
     "target": "es2020",
     "lib": ["dom", "dom.iterable", "esnext"],
@@ -16,8 +15,8 @@
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "node",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",