__root and context

const router = createRouter({
    routeTree,
    defaultPendingComponent: () => (
        <div className={`p-2 text-2xl`}>
            todo: spinner loading
        </div>
    ),

    defaultErrorComponent: ({error}) => <ErrorComponent error={error}/>,
    context: {
        auth: undefined!, // We'll inject this when we render
    },
    defaultPreload: 'intent',
})

const queryClient = new QueryClient({
    defaultOptions: {
        queries: {
            staleTime: Infinity,
        },
    },
})


declare module '@tanstack/react-router' {
    interface Register {
        router: typeof router
    }
}

function InnerApp() {

    const auth = useAuth();
    return <RouterProvider router={router} context={{auth}}/>
}

function App() {
    return (
        <QueryClientProvider client={queryClient}>
            <AuthProvider>
                <InnerApp/>
            </AuthProvider>
        </QueryClientProvider>

    )
}

const rootElement = document.getElementById('app')!

if (!rootElement.innerHTML) {
    const root = ReactDOM.createRoot(rootElement)
    root.render(<App/>)
}

const router = createRouter({
    routeTree,
    defaultPendingComponent: () => (
        <div className={`p-2 text-2xl`}>
            todo: spinner loading
        </div>
    ),

    defaultErrorComponent: ({error}) => <ErrorComponent error={error}/>,
    context: {
        auth: undefined!, // We'll inject this when we render
    },
    defaultPreload: 'intent',
})

const queryClient = new QueryClient({
    defaultOptions: {
        queries: {
            staleTime: Infinity,
        },
    },
})


declare module '@tanstack/react-router' {
    interface Register {
        router: typeof router
    }
}

function InnerApp() {

    const auth = useAuth();
    return <RouterProvider router={router} context={{auth}}/>
}

function App() {
    return (
        <QueryClientProvider client={queryClient}>
            <AuthProvider>
                <InnerApp/>
            </AuthProvider>
        </QueryClientProvider>

    )
}

const rootElement = document.getElementById('app')!

if (!rootElement.innerHTML) {
    const root = ReactDOM.createRoot(rootElement)
    root.render(<App/>)
}