Fixes tab loading

src/components/RelationshipList.tsx

@@ -1,15 +1,20 @@
 import { DocumentList } from "@/components/DocumentList";
 import { pb } from "@/lib/pocketbase";
 import { displayName } from "@/lib/relationships";
-import type { AnyDocument, Document, RelationshipType } from "@/lib/types";
-import { useState } from "react";
+import type {
+  AnyDocument,
+  Document,
+  Relationship,
+  RelationshipType,
+} from "@/lib/types";
+import { useQueryClient } from "@tanstack/react-query";
+import { useEffect, useState } from "react";
 import { Loader } from "./Loader";
 import { DocumentRow } from "./documents/DocumentRow";
 import { NewRelatedDocumentForm } from "./documents/NewRelatedDocumentForm";
 
 interface RelationshipListProps {
   root: AnyDocument;
-  items: AnyDocument[];
   relationshipType: RelationshipType;
 }
 
@@ -19,12 +24,39 @@ interface RelationshipListProps {
  */
 export function RelationshipList({
   root,
-  items: initialItems,
   relationshipType,
 }: RelationshipListProps) {
-  const [items, setItems] = useState<Document[]>(initialItems);
+  const [items, setItems] = useState<Document[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const queryClient = useQueryClient();
+
+  useEffect(() => {
+    async function fetchItems() {
+      const { items } = await queryClient.fetchQuery({
+        queryKey: [root.id, "relationship", relationshipType],
+        staleTime: 5 * 60 * 1000, // 5 mintues
+        queryFn: async () => {
+          setLoading(true);
+          const relationship: Relationship = await pb
+            .collection("relationships")
+            .getFirstListItem(
+              `primary = "${root.id}" && type = "${relationshipType}"`,
+              {
+                expand: "secondary",
+              },
+            );
+
+          setLoading(false);
+
+          return { items: relationship.expand?.secondary ?? [] };
+        },
+      });
+      setItems(items);
+    }
+
+    fetchItems();
+  });
 
   // Handles creation of a new document and adds it to the relationship
   const handleCreate = async (doc: Document) => {
@@ -48,6 +80,9 @@ export function RelationshipList({
           type: relationshipType,
         });
       }
+      queryClient.invalidateQueries({
+        queryKey: [root.id, "relationship", relationshipType],
+      });
       setItems((prev) => [...prev, doc]);
     } catch (e: any) {
       setError(e?.message || "Failed to add document to relationship.");