Add React-Query

app/root.tsx

@@ -6,10 +6,11 @@ import {
   Scripts,
   ScrollRestoration,
 } from "react-router";
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import React, { useState } from "react";
 
 import type { Route } from "./+types/root";
 import "./app.css";
-import React from "react";
 
 export const links: Route.LinksFunction = () => [];
 
@@ -32,7 +33,22 @@ export function Layout({ children }: { children: React.ReactNode }) {
 }
 
 export default function App() {
-  return <Outlet/>;
+  const [queryClient] = useState(
+    () => new QueryClient({
+      defaultOptions: {
+        queries: {
+          // With SSR, we usually want to set some default staleTime
+          // above 0 to avoid refetching immediately on the client
+          staleTime: 60 * 1000,
+        }
+      }
+    })
+  );
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Outlet/>
+    </QueryClientProvider>
+  );
 }
 
 export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {