update og image

src/app/(pages)/(home)/_components/bookmark-list.tsx

@@ -3,8 +3,9 @@
 import { BookmarkCard } from "./bookmark-card";
 import BlurFade from "~/app/_core/components/blur-fade";
 import { useBookmarkStore } from "../_state/store/use-bookmark-store";
-import { useQuery } from "@tanstack/react-query";
+
 import { bookmarksQueries } from "../_state/queries/bookmark-query";
+import { useQuery } from "@tanstack/react-query";
 
 export function BookmarkList() {
   const { activeBookmarkId } = useBookmarkStore();

src/app/(pages)/(home)/_state/mutations/use-create-bookmark-mutation.tsx

@@ -1,11 +1,11 @@
 import { useMutation } from "@tanstack/react-query";
 import { type createBookmark } from "~/server/queries/bookmark";
 import { bookmarkService } from "../../services/bookmark-service";
-import { useQueryClient } from "@tanstack/react-query";
 import { bookmarksQueries } from "../queries/bookmark-query";
+import { getQueryClient } from "~/app/_core/utils/get-query-client";
 
 export const useCreateBookmarkMutation = () => {
-  const queryClient = useQueryClient();
+  const queryClient = getQueryClient();
 
   return useMutation({
     mutationFn: (bookmark: Parameters<typeof createBookmark>[0]) =>

src/app/(pages)/(home)/_state/mutations/use-delete-bookmark-mutation.tsx

@@ -1,10 +1,10 @@
 import { useMutation } from "@tanstack/react-query";
 import { bookmarkService } from "../../services/bookmark-service";
-import { useQueryClient } from "@tanstack/react-query";
 import { bookmarksQueries } from "../queries/bookmark-query";
+import { getQueryClient } from "~/app/_core/utils/get-query-client";
 
 export const useDeleteBookmarkMutation = () => {
-  const queryClient = useQueryClient();
+  const queryClient = getQueryClient();
 
   return useMutation({
     mutationFn: (id: number) => bookmarkService.deleteBookmark(id),

src/app/(pages)/(home)/_state/mutations/use-update-bookmark-mutation.tsx

@@ -1,13 +1,14 @@
-import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useMutation } from "@tanstack/react-query";
 import { type updateBookmark } from "~/server/queries/bookmark";
 import { bookmarkService } from "../../services/bookmark-service";
 
 import { bookmarksQueries } from "../queries/bookmark-query";
+import { getQueryClient } from "~/app/_core/utils/get-query-client";
 
 export const updateBookmarkMutationKey = "updateBookmark";
 
 export const useUpdateBookmarkMutation = () => {
-  const queryClient = useQueryClient();
+  const queryClient = getQueryClient();
 
   return useMutation({
     mutationFn: (bookmark: Parameters<typeof updateBookmark>[0]) =>

src/app/(pages)/(home)/_state/mutations/use-url-metadata-mutation.tsx

@@ -1,10 +1,10 @@
 import { useMutation } from "@tanstack/react-query";
 import { metadataService } from "../../services/metadata-service";
-import { useQueryClient } from "@tanstack/react-query";
 import { bookmarksQueries } from "../queries/bookmark-query";
+import { getQueryClient } from "~/app/_core/utils/get-query-client";
 
 export const useUrlMetadataMutation = () => {
-  const queryClient = useQueryClient();
+  const queryClient = getQueryClient();
 
   return useMutation({
     mutationFn: (url: string) => metadataService.getMetadata(url),

src/app/(pages)/(home)/page.tsx

@@ -1,26 +1,19 @@
+import { Suspense } from "react";
 import { BookmarkInput } from "./_components/bookmark-input";
 import { BookmarkList } from "./_components/bookmark-list";
 import { bookmarksQueries } from "./_state/queries/bookmark-query";
-import {
-  dehydrate,
-  HydrationBoundary,
-  QueryClient,
-} from "@tanstack/react-query";
+import { ServerPrefetcher } from "~/app/_common/providers/server-prefetcher";
 
 export default async function HomePage() {
-  const queryClient = new QueryClient();
-
-  await queryClient.prefetchQuery(bookmarksQueries.bookmarks());
-
   return (
-    <HydrationBoundary state={dehydrate(queryClient)}>
+    <ServerPrefetcher query={bookmarksQueries.bookmarks()}>
       <main className="flex flex-col gap-4 pb-10">
         <h1 className="sr-only">
           {`Bookmarket - Buy and Sell Expert's Bookmark Collections`}
         </h1>
         <BookmarkInput />
         <BookmarkList />
       </main>
-    </HydrationBoundary>
+    </ServerPrefetcher>
   );
 }

src/app/(pages)/layout.tsx

@@ -44,7 +44,7 @@ export const metadata: Metadata = {
     siteName: "BookMarket",
     images: [
       {
-        url: "https://utfs.io/f/3A5RWyP8uGdp1aTyPGvFNZ8uUODoJXCrmlfzwiqaygGRY0Qv",
+        url: "https://utfs.io/f/xLzQ78o3fSpa5oVbiU4FX9O4zvxkP8oepgE3dacNjwsR7yTY",
         width: 1200,
         height: 1200,
         alt: "BookMarket - Buy and Sell Curated Bookmark Collections",

src/app/_common/providers/global-provider.tsx

@@ -1,23 +1,14 @@
 "use client";
 
 import { ClerkProvider } from "@clerk/nextjs";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import React from "react";
 import { useBodyScrollLock } from "../hooks/use-body-scroll-lock";
+import { getQueryClient } from "~/app/_core/utils/get-query-client";
 
 export const GlobalProvider = ({ children }: { children: React.ReactNode }) => {
-  const [queryClient] = React.useState(
-    () =>
-      new QueryClient({
-        defaultOptions: {
-          queries: {
-            staleTime: 1000 * 5,
-            gcTime: 1000 * 5,
-          },
-        },
-      }),
-  );
+  const [queryClient] = React.useState(() => getQueryClient());
   useBodyScrollLock();
 
   return (

src/app/_common/providers/server-prefetcher.tsx

@@ -0,0 +1,25 @@
+import {
+  dehydrate,
+  HydrationBoundary,
+  type UseQueryOptions,
+} from "@tanstack/react-query";
+import React from "react";
+import { getQueryClient } from "~/app/_core/utils/get-query-client";
+
+export const ServerPrefetcher = async ({
+  children,
+  query,
+}: {
+  children: React.ReactNode;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  query: UseQueryOptions<any, any, any, any>;
+}) => {
+  const queryClient = getQueryClient();
+  await queryClient.prefetchQuery(query);
+
+  return (
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      {children}
+    </HydrationBoundary>
+  );
+};

src/app/_core/utils/get-query-client.ts

@@ -0,0 +1,28 @@
+import { isServer, QueryClient } from "@tanstack/react-query";
+
+function makeQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 60 * 1000,
+        refetchOnWindowFocus: false,
+      },
+    },
+  });
+}
+
+let browserQueryClient: QueryClient | undefined = undefined;
+
+export function getQueryClient() {
+  if (isServer) {
+    // Server: always make a new query client
+    return makeQueryClient();
+  } else {
+    // Browser: make a new query client if we don't already have one
+    // This is very important, so we don't re-make a new client if React
+    // suspends during the initial render. This may not be needed if we
+    // have a suspense boundary BELOW the creation of the query client
+    if (!browserQueryClient) browserQueryClient = makeQueryClient();
+    return browserQueryClient;
+  }
+}

src/server/queries/bookmark.ts

@@ -13,7 +13,7 @@ export const getBookmarks = async () => {
     return [];
   }
 
-  return await db
+  return db
     .select()
     .from(bookmarks)
     .where(eq(bookmarks.userId, userId))