Removes Tanstack Query

src/routes/__root.tsx

@@ -1,6 +1,5 @@
 import { AuthProvider } from "@/context/auth/AuthContext";
 import { DocumentProvider } from "@/context/document/DocumentContext";
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { Outlet, createRootRoute } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
 
@@ -13,7 +12,6 @@ export const Route = createRootRoute({
         </DocumentProvider>
       </AuthProvider>
       <TanStackRouterDevtools />
-      <ReactQueryDevtools buttonPosition="bottom-right" />
     </>
   ),
 });

src/routes/_app/_authenticated/campaigns.$campaignId.tsx

@@ -1,11 +1,10 @@
-import { useCallback } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { createFileRoute, Link } from "@tanstack/react-router";
 import { pb } from "@/lib/pocketbase";
 import { SessionRow } from "@/components/documents/session/SessionRow";
 import { Button } from "@headlessui/react";
-import { useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
 import { Loader } from "@/components/Loader";
-import type { Relationship } from "@/lib/types";
+import type { Campaign, Relationship, Session } from "@/lib/types";
 
 export const Route = createFileRoute(
   "/_app/_authenticated/campaigns/$campaignId",
@@ -15,14 +14,15 @@ export const Route = createFileRoute(
 });
 
 function RouteComponent() {
-  const queryClient = useQueryClient();
   const params = Route.useParams();
 
-  const {
-    data: { campaign, sessions },
-  } = useSuspenseQuery({
-    queryKey: ["campaign"],
-    queryFn: async () => {
+  const [loading, setLoading] = useState(true);
+  const [campaign, setCampaign] = useState<Campaign | null>(null);
+  const [sessions, setSessions] = useState<Session[]>([]);
+
+  useEffect(() => {
+    async function fetchData() {
+      setLoading(true);
       const campaign = await pb
         .collection("campaigns")
         .getOne(params.campaignId);
@@ -31,14 +31,17 @@ function RouteComponent() {
         filter: `campaign = "${params.campaignId}" && type = 'session'`,
         sort: "-created",
       });
-      return {
-        campaign,
-        sessions,
-      };
-    },
-  });
+      setSessions(sessions as Session[]);
+      setCampaign(campaign as Campaign);
+      setLoading(false);
+    }
+    fetchData();
+  }, [setCampaign, setSessions, setLoading]);
 
   const createNewSession = useCallback(async () => {
+    if (campaign === null) {
+      return;
+    }
     // Check for a previous session
     const prevSession = await pb
       .collection("documents")
@@ -70,10 +73,12 @@ function RouteComponent() {
         });
       }
     }
-
-    queryClient.invalidateQueries({ queryKey: ["campaign"] });
   }, [campaign]);
 
+  if (loading || campaign === null) {
+    return <Loader />;
+  }
+
   return (
     <div className="max-w-xl mx-auto py-8">
       <div className="mb-2">

src/routes/_app_._authenticated.document_.$documentId.print.tsx

@@ -1,9 +1,8 @@
 import { DocumentPrintRow } from "@/components/documents/DocumentPrintRow";
 import { SessionPrintRow } from "@/components/documents/session/SessionPrintRow";
 import { Loader } from "@/components/Loader";
-import { pb } from "@/lib/pocketbase";
-import { RelationshipType, type Relationship, type Session } from "@/lib/types";
-import { useSuspenseQuery } from "@tanstack/react-query";
+import { useDocument, useDocumentCache } from "@/context/document/hooks";
+import { RelationshipType, type DocumentId, type Session } from "@/lib/types";
 import { createFileRoute } from "@tanstack/react-router";
 import _ from "lodash";
 
@@ -16,32 +15,28 @@ export const Route = createFileRoute(
 
 function RouteComponent() {
   const params = Route.useParams();
-  const {
-    data: { session, relationships },
-  } = useSuspenseQuery({
-    queryKey: ["session", "relationships"],
-    queryFn: async () => {
-      const session = await pb
-        .collection("documents")
-        .getOne(params.documentId);
-      const relationships: Relationship[] = await pb
-        .collection("relationships")
-        .getFullList({
-          filter: `primary = "${params.documentId}"`,
-          expand: "secondary",
-        });
-      console.log("Fetched data: ", relationships);
-      return {
-        session: session as Session,
-        relationships: _.mapValues(
-          _.groupBy(relationships, (r) => r.type),
-          (rs: Relationship[]) => rs.flatMap((r) => r.expand?.secondary),
-        ),
-      };
-    },
-  });
 
-  console.log("Parsed data: ", relationships);
+  const { cache } = useDocumentCache();
+  const { docResult } = useDocument(params.documentId as DocumentId);
+
+  if (docResult.type !== "ready") {
+    return <Loader />;
+  }
+
+  const session = docResult.value.doc as Session;
+  const relationships = _.mapValues(
+    docResult.value.relationships,
+    (relResult) => {
+      if (relResult.type != "ready") {
+        return [];
+      }
+      return relResult.value.secondary
+        .map((id) => cache.documents[id])
+        .flatMap((docResult) =>
+          docResult.type === "ready" ? [docResult.value.doc] : [],
+        );
+    },
+  );
 
   return (
     <div className="fill-w py-8 columns-2 gap-8 text-sm">