Move query client provider to Drawer

marshallku · May 27, 2024 · a994deb · a994deb
1 parent 08e8bee
commit a994deb
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 11 deletions.
diff --git 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
@@ -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>
     );