diff --git a/apps/console/src/pages/iam/auth/sign-in/SignInPage.tsx b/apps/console/src/pages/iam/auth/sign-in/SignInPage.tsx index adeaba99e..8a57c43a8 100644 --- a/apps/console/src/pages/iam/auth/sign-in/SignInPage.tsx +++ b/apps/console/src/pages/iam/auth/sign-in/SignInPage.tsx @@ -2,7 +2,8 @@ import { formatError, type GraphQLError } from "@probo/helpers"; import { useTranslate } from "@probo/i18n"; import { Button, Field, useToast } from "@probo/ui"; import type { FormEventHandler } from "react"; -import { useLazyLoadQuery, useMutation } from "react-relay"; +import { useMutation, usePreloadedQuery } from "react-relay"; +import type { PreloadedQuery } from "react-relay"; import { Link, matchPath, useLocation } from "react-router"; import { graphql } from "relay-runtime"; @@ -23,7 +24,7 @@ const signInMutation = graphql` } `; -const signInPageQuery = graphql` +export const signInPageQuery = graphql` query SignInPageQuery { oidcProviders { ...OIDCButtonsFragment @@ -31,13 +32,17 @@ const signInPageQuery = graphql` } `; -export default function SignInPage() { +type Props = { + queryRef: PreloadedQuery; +}; + +export default function SignInPage(props: Props) { const { __ } = useTranslate(); const { toast } = useToast(); const location = useLocation(); const safeContinueUrl = useSafeContinueUrl(); - const data = useLazyLoadQuery(signInPageQuery, {}); + const data = usePreloadedQuery(signInPageQuery, props.queryRef); const [signIn, isSigningIn] = useMutation(signInMutation); diff --git a/apps/console/src/pages/iam/auth/sign-in/SignInPageLoader.tsx b/apps/console/src/pages/iam/auth/sign-in/SignInPageLoader.tsx new file mode 100644 index 000000000..8d85f2042 --- /dev/null +++ b/apps/console/src/pages/iam/auth/sign-in/SignInPageLoader.tsx @@ -0,0 +1,23 @@ +import { useEffect } from "react"; +import { useQueryLoader } from "react-relay"; + +import type { SignInPageQuery } from "#/__generated__/iam/SignInPageQuery.graphql"; + +import SignInPage, { signInPageQuery } from "./SignInPage"; + +function SignInPageQueryLoader() { + const [queryRef, loadQuery] = + useQueryLoader(signInPageQuery); + + useEffect(() => { + loadQuery({}); + }, [loadQuery]); + + if (!queryRef) return null; + + return ; +} + +export default function SignInPageLoader() { + return ; +} diff --git a/apps/console/src/routes.tsx b/apps/console/src/routes.tsx index aa8ce2420..b8e35408f 100644 --- a/apps/console/src/routes.tsx +++ b/apps/console/src/routes.tsx @@ -41,7 +41,9 @@ const routes = [ children: [ { path: "login", - Component: lazy(() => import("./pages/iam/auth/sign-in/SignInPage")), + Component: lazy( + () => import("./pages/iam/auth/sign-in/SignInPageLoader"), + ), }, { path: "password-login",