useApolloClient

useApolloClient 사용을 해볼 것이다.

import { useApolloClient} from "@apollo/client";
 
const client = useApolloClient()

사용하고자하는 쿼리도 입력해준다.

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

setUserInfo를 사용해 줄 것이라서 GlobalContext에서 데려온다.
GlobalContext는 app.tsx에..

 const { setMyUserInfo } = useContext(GlobalContext);

const accessToken = result.data?.loginUser.accessToken || "";
//변수에  accessToken을 담아준다.

    const resultUserInfo = await client.query({
      query: FETCH_USER_LOGGED_IN,
      context: {
        headers: {
          authorization: `Bearer ${accessToken}`,
        },
      },
    });
    setMyUserInfo(resultUserInfo.data.fetchUserLoggedIn);

그리고 로그인을하면 넘어갈 페이지를 만들어준다.

router.push("/24-02-login-success");

넘어간 페이지를 작성해준다

import { useContext } from "react";
import { withAuth } from "../../src/commons/hocs/withAuth";
import { GlobalContext } from "../_app";

function LoginSuccessPage() {
  const { userInfo } = useContext(GlobalContext);

  return (
    <>
      <div>로그인에 성공하였따</div>
      <div>{userInfo.name}님 환영합니다</div>
    </>
  );
}

export default withAuth(LoginSuccessPage);

![]
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

잘 넘어갔다!