__root.tsx
1 import { useState } from 'react' 2 import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router' 3 import { QueryClient, QueryClientProvider } from '@tanstack/react-query' 4 import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools' 5 import { TanStackDevtools } from '@tanstack/react-devtools' 6 7 import appCss from '../styles.css?url' 8 9 export const Route = createRootRoute({ 10 head: () => ({ 11 meta: [ 12 { charSet: 'utf-8' }, 13 { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 14 { 15 title: 'Family Helper Chat', 16 }, 17 { 18 name: 'description', 19 content: 20 'Family chat assistant with text, voice, and image inputs, backed by an OpenAI-compatible LLM endpoint.', 21 }, 22 ], 23 links: [{ rel: 'stylesheet', href: appCss }], 24 }), 25 shellComponent: RootDocument, 26 }) 27 28 function RootDocument({ children }: { children: React.ReactNode }) { 29 const [queryClient] = useState( 30 () => 31 new QueryClient({ 32 defaultOptions: { 33 queries: { 34 retry: 1, 35 refetchOnWindowFocus: false, 36 }, 37 }, 38 }), 39 ) 40 const showTanStackDevtools = 41 import.meta.env.DEV && 42 import.meta.env.VITE_DISABLE_TANSTACK_DEVTOOLS !== '1' 43 44 return ( 45 <html lang="en"> 46 <head> 47 <HeadContent /> 48 </head> 49 <body> 50 <QueryClientProvider client={queryClient}> 51 {children} 52 {showTanStackDevtools ? ( 53 <TanStackDevtools 54 config={{ position: 'bottom-right' }} 55 plugins={[ 56 { 57 name: 'TanStack Router', 58 render: <TanStackRouterDevtoolsPanel />, 59 }, 60 ]} 61 /> 62 ) : null} 63 <Scripts /> 64 </QueryClientProvider> 65 </body> 66 </html> 67 ) 68 }