no-store caching strategy

Author: brendan-kellam

src/app/page.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import Image from "next/image";
 import logoDark from "../../public/sb_logo_dark_large.png";
 import logoLight from "../../public/sb_logo_light_large.png";

src/app/repos/page.tsx

@@ -1,13 +1,14 @@
-'use client';
-
+import { Suspense } from "react";
 import { NavigationMenu } from "../navigationMenu";
 import { RepositoryTable } from "./repositoryTable";
 
 export default function ReposPage() {
     return (
         <div className="h-screen flex flex-col items-center">
             <NavigationMenu />
-            <RepositoryTable />
+            <Suspense fallback={<div>Loading...</div>}>
+                <RepositoryTable />
+            </Suspense>
         </div>
     )
 }

src/app/repos/repositoryTable.tsx

@@ -1,25 +1,17 @@
-'use client';
-
 import { DataTable } from "@/components/ui/data-table";
 import { columns, RepositoryColumnInfo } from "./columns";
+import { listRepositories } from "@/lib/server/searchService";
 import { isServiceError } from "@/lib/utils";
-import { useQuery } from "@tanstack/react-query";
-import { useMemo } from "react";
-import { getRepos } from "../api/(client)/client";
 
-export const RepositoryTable = () => {
-    const { data: _repos } = useQuery({
-        queryKey: ["repos"],
-        queryFn: () => getRepos(),
-        enabled: typeof window !== "undefined",
-    });
+export const RepositoryTable = async () => {
+    const _repos = await listRepositories();
 
-    const repos = useMemo(() => {
-        if (isServiceError(_repos)) {
-            return [];
-        }
+    if (isServiceError(_repos)) {
+        return <div>Error fetching repositories</div>;
+    }
 
-        return _repos?.List.Repos.map((repo): RepositoryColumnInfo => ({
+    const repos = _repos.List.Repos.map((repo): RepositoryColumnInfo => {
+        return {
             name: repo.Repository.Name,
             branches: repo.Repository.Branches.map((branch) => {
                 return {
@@ -34,10 +26,10 @@ export const RepositoryTable = () => {
             latestCommit: repo.Repository.LatestCommitDate,
             indexedFiles: repo.Stats.Documents,
             commitUrlTemplate: repo.Repository.CommitURLTemplate,
-        })).sort((a, b) => {
-            return new Date(b.lastIndexed).getTime() - new Date(a.lastIndexed).getTime();
-        }) ?? [];
-    }, [_repos]);
+        }
+    }).sort((a, b) => {
+        return new Date(b.lastIndexed).getTime() -  new Date(a.lastIndexed).getTime();
+    });
 
     return (
         <DataTable

src/lib/server/searchService.ts

@@ -74,7 +74,8 @@ export const listRepositories = async (): Promise<ListRepositoriesResponse | Ser
     const listResponse = await zoektFetch({
         path: "/api/list",
         body,
-        method: "POST"
+        method: "POST",
+        cache: "no-store",
     });
 
     if (!listResponse.ok) {

src/lib/server/zoektClient.ts

@@ -5,12 +5,14 @@ interface ZoektRequest {
     path: string,
     body: string,
     method: string,
+    cache?: RequestCache,
 }
 
 export const zoektFetch = async ({
     path,
     body,
     method,
+    cache,
 }: ZoektRequest) => {
     const start = Date.now();
 
@@ -22,6 +24,7 @@ export const zoektFetch = async ({
                 "Content-Type": "application/json",
             },
             body,
+            cache,
         }
     );