From a994deb96716f6c5a327b2df6faa64e4b9cdc74d Mon Sep 17 00:00:00 2001
From: Marshall Ku <marshall@kakao.com>
Date: Tue, 28 May 2024 07:26:42 +0900
Subject: [PATCH] Move query client provider to Drawer

---
 apps/blog/src/components/Drawer/index.tsx        |  8 +++++---
 apps/blog/src/components/DrawerContent/index.tsx | 13 +++++--------
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/apps/blog/src/components/Drawer/index.tsx b/apps/blog/src/components/Drawer/index.tsx
index b58f2afe..12a3f20b 100644
--- a/apps/blog/src/components/Drawer/index.tsx
+++ b/apps/blog/src/components/Drawer/index.tsx
@@ -1,16 +1,18 @@
 "use client";
 
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { createPortal } from "react-dom";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import DrawerContent from "#components/DrawerContent";
 import Hamburger from "#components/Hamburger";
 
 function Drawer() {
+    const queryClient = useMemo(() => new QueryClient(), []);
     const [opened, setOpened] = useState(false);
     const [willClose, setWillClose] = useState(false);
 
     return (
-        <>
+        <QueryClientProvider client={queryClient}>
             <Hamburger
                 animationOnHover
                 opened={!willClose && opened}
@@ -31,7 +33,7 @@ function Drawer() {
                     />,
                     document.getElementById("drawer-root")!,
                 )}
-        </>
+        </QueryClientProvider>
     );
 }
 
diff --git a/apps/blog/src/components/DrawerContent/index.tsx b/apps/blog/src/components/DrawerContent/index.tsx
index 0f871adb..9fccb9aa 100644
--- a/apps/blog/src/components/DrawerContent/index.tsx
+++ b/apps/blog/src/components/DrawerContent/index.tsx
@@ -53,7 +53,6 @@ const List = ({
 
 function DrawerContent({ opened, closeDrawer, willClose, setWillClose }: DrawerContentProps) {
     const containerRef = useRef<HTMLDivElement>(null);
-    const queryClient = useMemo(() => new QueryClient(), []);
 
     const close = useCallback(() => {
         containerRef.current?.addEventListener("animationend", closeDrawer, { once: true, passive: true });
@@ -92,13 +91,11 @@ function DrawerContent({ opened, closeDrawer, willClose, setWillClose }: DrawerC
                         ))}
                     </ul>
                 </nav>
-                <QueryClientProvider client={queryClient}>
-                    <ErrorBoundary fallback={null}>
-                        <Suspense fallback={null}>
-                            <DrawerComment closeDrawer={close} />
-                        </Suspense>
-                    </ErrorBoundary>
-                </QueryClientProvider>
+                <ErrorBoundary fallback={null}>
+                    <Suspense fallback={null}>
+                        <DrawerComment closeDrawer={close} />
+                    </Suspense>
+                </ErrorBoundary>
             </div>
         </div>
     );