From 42785f7033411a5bd068d7d142d7502c366b406c Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Thu, 21 Nov 2024 08:52:07 +0100
Subject: [PATCH] feat: add ssr using tanstack query

---
 package.json                                  |  1 +
 .../components/InfiniteScrollGuilds.tsx       |  2 +-
 src/app/explorer/page.tsx                     | 23 +++++++++++++++++--
 src/components/Providers.tsx                  |  2 ++
 4 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 7b12711d08..38132b0f59 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "@radix-ui/react-switch": "^1.1.1",
     "@t3-oss/env-nextjs": "^0.11.1",
     "@tanstack/react-query": "^5.60.2",
+    "@tanstack/react-query-devtools": "^5.61.0",
     "autoprefixer": "^10.4.20",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
diff --git a/src/app/explorer/components/InfiniteScrollGuilds.tsx b/src/app/explorer/components/InfiniteScrollGuilds.tsx
index 421effba49..b7fdc09301 100644
--- a/src/app/explorer/components/InfiniteScrollGuilds.tsx
+++ b/src/app/explorer/components/InfiniteScrollGuilds.tsx
@@ -27,7 +27,7 @@ export const InfiniteScrollGuilds = () => {
 
   const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } =
     useInfiniteQuery({
-      queryKey: ["guilds", search],
+      queryKey: ["guilds", search || ""],
       queryFn: fetchGuilds,
       initialPageParam: 1,
       enabled: search !== undefined,
diff --git a/src/app/explorer/page.tsx b/src/app/explorer/page.tsx
index 167675bb07..b08e6eb7c8 100644
--- a/src/app/explorer/page.tsx
+++ b/src/app/explorer/page.tsx
@@ -4,6 +4,11 @@ import { Card } from "@/components/ui/Card";
 import { Skeleton } from "@/components/ui/Skeleton";
 import { env } from "@/lib/env";
 import { Plus, SignIn } from "@phosphor-icons/react/dist/ssr";
+import {
+  HydrationBoundary,
+  QueryClient,
+  dehydrate,
+} from "@tanstack/react-query";
 import { Suspense } from "react";
 import { GuildCard } from "./components/GuildCard";
 import { InfiniteScrollGuilds } from "./components/InfiniteScrollGuilds";
@@ -26,7 +31,19 @@ const GuildCardSkeleton = () => {
   );
 };
 
-export default function Explorer() {
+export default async function Explorer() {
+  const queryClient = new QueryClient();
+  await queryClient.prefetchInfiniteQuery({
+    queryKey: ["guilds", ""],
+    initialPageParam: 1,
+    queryFn: async ({ pageParam }: { pageParam: number }) =>
+      (
+        await fetch(
+          `${env.NEXT_PUBLIC_API}/guild/search?page=${pageParam}&pageSize=${24}&search=`,
+        )
+      ).json(),
+  });
+
   return (
     <main className="container mx-auto grid max-w-screen-lg gap-8 px-4 py-8">
       <section className="pt-6 pb-8">
@@ -39,7 +56,9 @@ export default function Explorer() {
         <Search />
       </section>
 
-      <InfiniteScrollGuilds />
+      <HydrationBoundary state={dehydrate(queryClient)}>
+        <InfiniteScrollGuilds />
+      </HydrationBoundary>
     </main>
   );
 }
diff --git a/src/components/Providers.tsx b/src/components/Providers.tsx
index 93e766658d..6722b57a3a 100644
--- a/src/components/Providers.tsx
+++ b/src/components/Providers.tsx
@@ -2,6 +2,7 @@
 
 import { wagmiConfig } from "@/config/wagmi";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { Provider as JotaiProvider } from "jotai";
 import { ThemeProvider } from "next-themes";
 import type { FunctionComponent, PropsWithChildren } from "react";
@@ -23,6 +24,7 @@ export const Providers: FunctionComponent<PropsWithChildren> = ({
         <WagmiProvider config={wagmiConfig}>
           <QueryClientProvider client={queryClient}>
             {children}
+            <ReactQueryDevtools initialIsOpen={false} />
           </QueryClientProvider>
         </WagmiProvider>
       </ThemeProvider>