azpsen/tailfin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Consolidate query error handling

Browse Source
This commit is contained in:
april 2024-01-04 14:13:07 -06:00
parent 783bf668d1
commit a600cff6e6
4 changed files with 35 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
web/app/root.tsx
View File

@ -12,10 +12,16 @@ import {
Scripts,
ScrollRestoration,
isRouteErrorResponse,
useNavigate,
useRouteError,
} from "@remix-run/react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import {
MutationCache,
QueryCache,
QueryClient,
QueryClientProvider,
} from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import {
@ -30,6 +36,8 @@ import {
import { IconRocket } from "@tabler/icons-react";
import { AuthProvider } from "./util/auth";
import { useState } from "react";
import { AxiosError } from "axios";
export const links: LinksFunction = () => [
{
@ -94,9 +102,32 @@ export function ErrorBoundary() {
);
}
const queryClient = new QueryClient();
export default function App({ pageProps }) {
const navigate = useNavigate();
const [queryClient] = useState(
() =>
new QueryClient({
queryCache: new QueryCache({
onError: (error: Error) => {
if (error instanceof AxiosError && error.response?.status === 401) {
navigate("/login");
}
},
}),
defaultOptions: {
queries: {
staleTime: 1000,
retry: (failureCount, error: Error) => {
return (
!error ||
(error instanceof AxiosError && error.response?.status !== 401)
);
},
},
},
})
);
export default function App() {
return (
<html lang="en">
<head>

22
web/app/routes/logbook.flights.$id/route.tsx
View File

@ -1,11 +1,8 @@
import { client } from "@/util/api";
import { useAuth } from "@/util/auth";
import { Center, Container, List, Loader, Stack, Text } from "@mantine/core";
import { useNavigate, useParams } from "@remix-run/react";
import { useParams } from "@remix-run/react";
import { IconAlertTriangle } from "@tabler/icons-react";
import { useQuery } from "@tanstack/react-query";
import { AxiosError } from "axios";
import { useEffect } from "react";
export default function Flight() {
const params = useParams();
@ -14,25 +11,8 @@ export default function Flight() {
queryKey: [params.id],
queryFn: async () =>
await client.get(`/flights/${params.id}`).then((res) => res.data),
retry: (failureCount, error: AxiosError) => {
return !error || error.response?.status !== 401;
},
});
const navigate = useNavigate();
const { clearUser } = useAuth();
useEffect(() => {
if (
flight.isError &&
flight.error instanceof AxiosError &&
flight.error.response?.status === 401
) {
clearUser();
navigate("/login");
}
}, [flight]);
return (
<Container>
<Stack h="calc(100vh - 95px)">

33
web/app/routes/logbook.flights/flights-list.tsx
View File

@ -1,5 +1,4 @@
import { client } from "@/util/api";
import { useAuth } from "@/util/auth";
import { FlightConciseSchema } from "@/util/types";
import {
NavLink,
@ -13,8 +12,6 @@ import {
import { Link, useLocation, useNavigate } from "@remix-run/react";
import { IconPlus } from "@tabler/icons-react";
import { useQuery } from "@tanstack/react-query";
import { AxiosError } from "axios";
import { useEffect } from "react";
export function FlightsList() {
const location = useLocation();
@ -23,24 +20,9 @@ export function FlightsList() {
const flights = useQuery({
queryKey: ["flights-list"],
queryFn: async () => await client.get(`/flights`).then((res) => res.data),
retry: (failureCount, error: AxiosError) => {
return !error || error.response?.status !== 401;
},
});
const navigate = useNavigate();
const { clearUser } = useAuth();
useEffect(() => {
if (
flights.isError &&
flights.error instanceof AxiosError &&
flights.error.response?.status === 401
) {
clearUser();
navigate("/login");
}
}, [flights]);
return (
<Stack p="0" m="0" gap="0">
@ -82,24 +64,9 @@ export function MobileFlightsList() {
const flights = useQuery({
queryKey: ["flights-list"],
queryFn: async () => await client.get(`/flights`).then((res) => res.data),
retry: (failureCount, error: AxiosError) => {
return !error || error.response?.status !== 401;
},
});
const navigate = useNavigate();
const { clearUser } = useAuth();
useEffect(() => {
if (
flights.isError &&
flights.error instanceof AxiosError &&
flights.error.response?.status === 401
) {
clearUser();
navigate("/login");
}
}, [flights]);
return (
<Stack p="0" m="0" justify="space-between" h="calc(100vh - 95px)">

21
web/app/routes/logbook.me/route.tsx
View File

@ -1,34 +1,13 @@
import { client } from "@/util/api";
import { useAuth } from "@/util/auth";
import { Container, Text, Title } from "@mantine/core";
import { useNavigate } from "@remix-run/react";
import { useQuery } from "@tanstack/react-query";
import { AxiosError } from "axios";
import { useEffect } from "react";
export default function Me() {
const user = useQuery({
queryKey: ["user"],
queryFn: async () => await client.get(`users/me`).then((res) => res.data),
retry: (failureCount, error: AxiosError) => {
return !error || error.response?.status !== 401;
},
});
const { clearUser } = useAuth();
const navigate = useNavigate();
useEffect(() => {
if (
user.isError &&
user.error instanceof AxiosError &&
user.error.response?.status === 401
) {
clearUser();
navigate("/login");
}
}, [user]);
return (
<Container>
<Title order={2}>{user.data.username}</Title>