From 0d4b941b438dc446c6a68f2e6e6925564fdb6a7a Mon Sep 17 00:00:00 2001 From: Quentin Gliech Date: Fri, 16 Feb 2024 19:25:23 +0100 Subject: [PATCH] Make sure all the loader use the abort signal This makes sure that the loader stops loading when navigating away --- frontend/src/routes/_account.index.tsx | 8 +++++-- frontend/src/routes/_account.sessions.$id.tsx | 8 +++++-- .../src/routes/_account.sessions.index.tsx | 8 +++++-- frontend/src/routes/_account.tsx | 8 +++++-- frontend/src/routes/clients.$id.tsx | 8 +++++-- frontend/src/routes/devices.$id.tsx | 22 ++++++++++++++----- frontend/src/routes/emails.$id.verify.tsx | 12 ++++++---- 7 files changed, 54 insertions(+), 20 deletions(-) diff --git a/frontend/src/routes/_account.index.tsx b/frontend/src/routes/_account.index.tsx index f2841803c..6a96a1085 100644 --- a/frontend/src/routes/_account.index.tsx +++ b/frontend/src/routes/_account.index.tsx @@ -39,8 +39,12 @@ const QUERY = graphql(/* GraphQL */ ` `); export const Route = createFileRoute("/_account/")({ - async loader({ context }) { - const result = await context.client.query(QUERY, {}); + async loader({ context, abortController: { signal } }) { + const result = await context.client.query( + QUERY, + {}, + { fetchOptions: { signal } }, + ); if (result.error) throw result.error; if (result.data?.viewer.__typename !== "User") throw notFound(); }, diff --git a/frontend/src/routes/_account.sessions.$id.tsx b/frontend/src/routes/_account.sessions.$id.tsx index 00598fba1..103f3dd91 100644 --- a/frontend/src/routes/_account.sessions.$id.tsx +++ b/frontend/src/routes/_account.sessions.$id.tsx @@ -24,8 +24,12 @@ import OAuth2SessionDetail from "../components/SessionDetail/OAuth2SessionDetail import { graphql } from "../gql"; export const Route = createFileRoute("/_account/sessions/$id")({ - async loader({ context, params }) { - const result = await context.client.query(QUERY, { id: params.id }); + async loader({ context, params, abortController: { signal } }) { + const result = await context.client.query( + QUERY, + { id: params.id }, + { fetchOptions: { signal } }, + ); if (result.error) throw result.error; if (!result.data?.node) throw notFound(); }, diff --git a/frontend/src/routes/_account.sessions.index.tsx b/frontend/src/routes/_account.sessions.index.tsx index f804b627e..fe1fef586 100644 --- a/frontend/src/routes/_account.sessions.index.tsx +++ b/frontend/src/routes/_account.sessions.index.tsx @@ -32,8 +32,12 @@ const QUERY = graphql(/* GraphQL */ ` `); export const Route = createFileRoute("/_account/sessions/")({ - async loader({ context }) { - const result = await context.client.query(QUERY, {}); + async loader({ context, abortController: { signal } }) { + const result = await context.client.query( + QUERY, + {}, + { fetchOptions: { signal } }, + ); if (result.error) throw result.error; if (result.data?.viewer?.__typename !== "User") throw notFound(); }, diff --git a/frontend/src/routes/_account.tsx b/frontend/src/routes/_account.tsx index 25344b836..21e2e29e0 100644 --- a/frontend/src/routes/_account.tsx +++ b/frontend/src/routes/_account.tsx @@ -31,8 +31,12 @@ const QUERY = graphql(/* GraphQL */ ` `); export const Route = createFileRoute("/_account")({ - loader: async ({ context }) => { - const result = await context.client.query(QUERY, {}); + loader: async ({ context, abortController: { signal } }) => { + const result = await context.client.query( + QUERY, + {}, + { fetchOptions: { signal } }, + ); if (result.error) throw result.error; if (result.data?.viewer.__typename !== "User") throw notFound(); }, diff --git a/frontend/src/routes/clients.$id.tsx b/frontend/src/routes/clients.$id.tsx index a59bb2732..2e5ecb0e7 100644 --- a/frontend/src/routes/clients.$id.tsx +++ b/frontend/src/routes/clients.$id.tsx @@ -27,8 +27,12 @@ const QUERY = graphql(/* GraphQL */ ` `); export const Route = createFileRoute("/clients/$id")({ - loader: async ({ context, params }) => { - const result = await context.client.query(QUERY, { id: params.id }); + loader: async ({ context, params, abortController: { signal } }) => { + const result = await context.client.query( + QUERY, + { id: params.id }, + { fetchOptions: { signal } }, + ); if (result.error) throw result.error; if (!result.data?.oauth2Client) throw notFound(); }, diff --git a/frontend/src/routes/devices.$id.tsx b/frontend/src/routes/devices.$id.tsx index 208ea81d4..68d0e0a04 100644 --- a/frontend/src/routes/devices.$id.tsx +++ b/frontend/src/routes/devices.$id.tsx @@ -42,15 +42,25 @@ const QUERY = graphql(/* GraphQL */ ` `); export const Route = createFileRoute("/devices/$id")({ - async loader({ context, params }) { - const viewer = await context.client.query(CURRENT_VIEWER_QUERY, {}); + async loader({ context, params, abortController: { signal } }) { + const viewer = await context.client.query( + CURRENT_VIEWER_QUERY, + {}, + { + fetchOptions: { signal }, + }, + ); if (viewer.error) throw viewer.error; if (viewer.data?.viewer.__typename !== "User") throw notFound(); - const result = await context.client.query(QUERY, { - deviceId: params.id, - userId: viewer.data.viewer.id, - }); + const result = await context.client.query( + QUERY, + { + deviceId: params.id, + userId: viewer.data.viewer.id, + }, + { fetchOptions: { signal } }, + ); if (result.error) throw result.error; const session = result.data?.session; if (!session) throw notFound(); diff --git a/frontend/src/routes/emails.$id.verify.tsx b/frontend/src/routes/emails.$id.verify.tsx index c56998767..866f1054b 100644 --- a/frontend/src/routes/emails.$id.verify.tsx +++ b/frontend/src/routes/emails.$id.verify.tsx @@ -27,10 +27,14 @@ const QUERY = graphql(/* GraphQL */ ` `); export const Route = createFileRoute("/emails/$id/verify")({ - async loader({ context, params }) { - const result = await context.client.query(QUERY, { - id: params.id, - }); + async loader({ context, params, abortController: { signal } }) { + const result = await context.client.query( + QUERY, + { + id: params.id, + }, + { fetchOptions: { signal } }, + ); if (result.error) throw result.error; if (!result.data?.userEmail) throw notFound(); },