diff --git a/package.json b/package.json index f2b7b79a8..ad9136ee1 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "private": true, "type": "module", "scripts": { - "dev": "next dev --turbo", + "dev": "next dev", "build": "next build", "start": "next start", "predev": "pnpm run generate", diff --git a/src/app/(main)/login/LoginComponent.tsx b/src/app/(main)/login/LoginComponent.tsx new file mode 100644 index 000000000..a14004059 --- /dev/null +++ b/src/app/(main)/login/LoginComponent.tsx @@ -0,0 +1,30 @@ +"use client"; + +import { useQuery } from "urql"; +import { useSaleorAuthContext } from "@saleor/auth-sdk/react"; +import { CurrentUserDocument, type CurrentUserQuery } from "@/gql/graphql"; +import { LoginForm } from "@/ui/components/LoginForm"; +import { UserCard } from "@/ui/components/UserCard"; + +export const LoginComponent = () => { + const { signOut } = useSaleorAuthContext(); + + const [{ data }] = useQuery({ + query: CurrentUserDocument.toString(), + }); + + return data?.me ? ( + <> + + + + ) : ( + + ); +}; diff --git a/src/app/(main)/login/page.tsx b/src/app/(main)/login/page.tsx index 0af7f7515..da74d4404 100644 --- a/src/app/(main)/login/page.tsx +++ b/src/app/(main)/login/page.tsx @@ -1,39 +1,13 @@ -"use client"; - -import { gql, useQuery } from "urql"; -import { useSaleorAuthContext } from "@saleor/auth-sdk/react"; -import { LoginForm } from "@/ui/components/LoginForm"; +import { Suspense } from "react"; +import { LoginComponent } from "./LoginComponent"; import { Loader } from "@/ui/atoms/Loader"; -import { CurrentUserDocument, type CurrentUserQuery } from "@/gql/graphql"; -import { UserCard } from "@/ui/components/UserCard"; export default function LoginPage() { - const { signOut } = useSaleorAuthContext(); - - const [{ data, fetching }] = useQuery({ - query: gql(CurrentUserDocument.toString()), - }); - - if (fetching) { - return ; - } - return ( -
- {data?.me ? ( - <> - - - - ) : ( - - )} -
+ }> +
+ +
+
); } diff --git a/src/ui/components/AuthProvider.tsx b/src/ui/components/AuthProvider.tsx index e37e6fab6..6d2a98e54 100644 --- a/src/ui/components/AuthProvider.tsx +++ b/src/ui/components/AuthProvider.tsx @@ -20,23 +20,32 @@ export const saleorAuthClient = createSaleorAuthClient({ saleorApiUrl, }); -const makeUrqlClient = () => - createClient({ +const makeUrqlClient = () => { + console.log(`makeUrqlClient`); + return createClient({ url: saleorApiUrl, suspense: true, - requestPolicy: "cache-first", + // requestPolicy: "cache-first", fetch: (input, init) => saleorAuthClient.fetchWithAuth(input as NodeJS.fetch.RequestInfo, init), exchanges: [dedupExchange, cacheExchange, fetchExchange], }); +}; export function AuthProvider({ children }: { children: ReactNode }) { + console.log("AuthProvider"); invariant(saleorApiUrl, "Missing NEXT_PUBLIC_SALEOR_API_URL env variable"); - const [urqlClient, setUrqlClient] = useState(makeUrqlClient()); + const [urqlClient, setUrqlClient] = useState(() => makeUrqlClient()); useAuthChange({ saleorApiUrl, - onSignedOut: () => setUrqlClient(makeUrqlClient()), - onSignedIn: () => setUrqlClient(makeUrqlClient()), + onSignedOut: () => { + console.log("onSignedOut"); + setUrqlClient(makeUrqlClient()); + }, + onSignedIn: () => { + console.log("onSignedIn"); + setUrqlClient(makeUrqlClient()); + }, }); return ( diff --git a/src/ui/components/UserCard.tsx b/src/ui/components/UserCard.tsx index 4cc3fc896..3d85fe6d9 100644 --- a/src/ui/components/UserCard.tsx +++ b/src/ui/components/UserCard.tsx @@ -1,24 +1,20 @@ import Image from "next/image"; -type UserCardProps = { - email: string; - avatarURL: string; -}; - -export const UserCard = (user: UserCardProps) => { - const { email, avatarURL } = user; +export const UserCard = ({ user }: { user: { email: string; avatarURL?: string } }) => { return (
- + {user.avatarURL && ( + + )}

- {email} has successfully signed in. + {user.email} has successfully signed in.