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 (
@@ -39,7 +56,9 @@ export default function Explorer() {
-
+
+
+
);
}
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 = ({
{children}
+