51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
import { Box } from '@mui/material';
|
|
import { QueryClient, useQueryErrorResetBoundary } from '@tanstack/react-query';
|
|
import { createRootRouteWithContext, ErrorRouteComponent, Outlet, useRouter } from '@tanstack/react-router';
|
|
import { TanStackRouterDevtools } from '@tanstack/router-devtools';
|
|
import { useEffect } from 'react';
|
|
import { useApi } from '../api/Api';
|
|
import Header from '../components/Header/Header';
|
|
|
|
const Root = () => {
|
|
return (
|
|
<>
|
|
<Header />
|
|
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
|
|
<Box sx={{ maxWidth: '800px', flexGrow: 1 }}>
|
|
<Outlet />
|
|
</Box>
|
|
</Box>
|
|
{process.env.NODE_ENV === 'development' && <TanStackRouterDevtools />}
|
|
</>
|
|
);
|
|
};
|
|
|
|
const ErrorComponent: ErrorRouteComponent = ({ error }) => {
|
|
const router = useRouter();
|
|
const queryErrorResetBoundary = useQueryErrorResetBoundary();
|
|
|
|
useEffect(() => {
|
|
// Reset the query error boundary
|
|
queryErrorResetBoundary.reset();
|
|
}, [queryErrorResetBoundary]);
|
|
|
|
return (
|
|
<div>
|
|
{error.message}
|
|
<button
|
|
onClick={() => {
|
|
// Invalidate the route to reload the loader, and reset any router error boundaries
|
|
router.invalidate();
|
|
}}
|
|
>
|
|
retry
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const Route = createRootRouteWithContext<{ queryClient: QueryClient; Api: ReturnType<typeof useApi> }>()({
|
|
component: Root,
|
|
errorComponent: ErrorComponent,
|
|
});
|