인프런 커뮤니티 질문&답변

playgroud 에서 회원을 생성 이후 login 페이지에서 로그인을 성공적으로 하였으나 login success 페이지에서 fetchuserloggedin 이 성공적으로 이루어 지지 않는거 같습니다. 회원가입을 여러번 해서 다른 계정으로 시도해도 name 부분이 표시가 되지 않네요. 혹시 뭐가 문제일까요?

import { useState } from "react";
import { gql, useMutation } from "@apollo/client";
import {
  IMutation,
  IMutationLoginUserArgs,
} from "../../../src/commons/types/generated/types";
import { accessTokenState } from "../../../src/commons/stores";
import { useRecoilState } from "recoil";
import { useRouter } from "next/router";

const LOGIN_USER = gql`
  mutation loginUser($email: String!, $password: String!) {
    loginUser(email: $email, password: $password) {
      accessToken
    }
  }
`;

export default function LoginPage() {
  const router = useRouter();

  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [loginUser] = useMutation<
    Pick<IMutation, "loginUser">,
    IMutationLoginUserArgs
  >(LOGIN_USER);

  const [, setAccessToken] = useRecoilState(accessTokenState);

  const onChangneEmail = (event) => {
    setEmail(event.currentTarget.value);
  };

  const onChangnePassword = (event) => {
    setPassword(event.currentTarget.value);
  };

  const onClickLogin = async () => {
    try {
      //1.로그인 뮤테이션 날려서 accessToken 받아오기
      const result = await loginUser({
        variables: {
          email,
          password,
        },
      });
      const accessToken = result.data?.loginUser.accessToken;
      console.log(accessToken);

      //받아온 accessToken 을 글로벌 스테이트에 저장해야지 모든 애들이 쓸수 있음
      if (accessToken === undefined) {
        alert("로그인에 실패했습니다: 다시 시도해주세요");
        return;
      }

      setAccessToken(accessToken);
      // 3. 로그인 성공 페지이로 이동하기
      void router.push("/section23/23-01-login-success");
    } catch (error) {
      if (error instanceof Error) alert(error.message);
    }
  };

  return (
    <>
      이메일:{" "}
      <input onClick={onChangneEmail} type="text" placeholder="이메일 입력" />
      비밀번호:{" "}
      <input
        onClick={onChangnePassword}
        type="password"
        placeholder="비밀번호 입력"
      />
      <button onClick={onClickLogin}>로그인</button>
    </>
  );
}

import { useQuery, gql } from "@apollo/client";
import type { IQuery } from "../../../src/commons/types/generated/types";

const FETCH_USER_LOGGED_IN = gql`
  query {
    fetchUserLoggedIn {
      email
      name
    }
  }
`;

export default function LoginPage() {
  const { data } =
    useQuery<Pick<IQuery, "fetchUserLoggedIn">>(FETCH_USER_LOGGED_IN);

  return <>{data?.fetchUserLoggedIn.name}님 환영합니다!</>;
}