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

아래에 질문이 있으나 해결안이 없어 다시 문의드립니다.

refreshToken, 쿠키는 정상적으로 전달되고 있습니다.

setCookie도 나옵니다.

그러나, Application에 나타나지 않습니다.

그리고 조금 기다렸다가 acessToken을 재발급하려고 클릭하면 아래와 같은 메시지가 나타납니다.

크롬에서 써드파티 쿠키를 다 accept하도록 설정이 되어있고, 시크릿 모드에서도 진행해봤고 사파리에서도 동일합니다.

클릭하여 나타난 통신기록을 총 3번입니다.

1. 첫번째 통신은 accessToken만료로 발생한 것으로 보입니다.

네트워크 통신기록을 살펴보면 UNAUTHENTICATED가 발생된 것을 알수 있습니다.

2. 두번째 통신은 restoreAccessToken의 뮤테이션입니다. 헤더와 페이로드는 아래와 같습니다. jwt가 첨부되지 않았다는 부분입니다.

   
   

   

    

3. 3번째 통신의 Header와 payload, response입니다. 이 부분은 주어진 조건으로 사용자 정보를 불러오는 query같습니다. 사용자에 관련된 정보가 없이 시도되어 _id null이 표시된것 같습니다.

   
   

   

   
   인터넷에 검색해보았지만 잘 모르겠습니다. axios통신으로 refreshToken을 직접 저장해주는 코드를 보긴 했는데, graphql은 설정만 바꾼다고 하셔서 refreshToken을 어떻게 처리하는지 잘 모르겠습니다.
   

   관련해서 검색을 통해 https로 환경을 바꾸면 될거다 하여, localhost:3000을 mkcert로 https로 환경을 바꾸려고 해봤는데 설치만 하고 아래의 글을 발견해서 잠깐 멈추었습니다. https://shingy.tistory.com/46

    

    

   _id null의 문제가 local에 받아온 쿠키를 저장하지 못하는 문제인것 같은데, 어떻게 처리할수있는 방법이 있나 싶어서 여쭤봅니다.

    

4. 코드

    

   getAccessToken의 코드

    

   import { GraphQLClient, gql } from "graphql-request";
   import { IMutation } from "../../../commons/types/generated/types";
   
   const RESTORE_ACCESS_TOKEN = gql`
     mutation {
       restoreAccessToken {
         accessToken
       }
     }
   `;
   
   export const getAccessToken = async (): Promise<string | undefined> => {
     try {
       const graphQLClient = new GraphQLClient(
         "https://backend-practice.codebootcamp.co.kr/graphql",
         { credentials: "include" },
       );
       const result =
         await graphQLClient.request<Pick<IMutation, "restoreAccessToken">>(
           RESTORE_ACCESS_TOKEN,
         );
       const newAccessToken = result.restoreAccessToken.accessToken;
       return newAccessToken;
     } catch (error) {
       if (error instanceof Error) console.log(error);
     }
   };
   

   아폴로 클라이언트 코드

 import {
  ApolloClient,
  InMemoryCache,
  ApolloProvider,
  ApolloLink,
  fromPromise,
} from "@apollo/client";
import { createUploadLink } from "apollo-upload-client"; 
import { useRecoilState } from "recoil";
import { accessTokenState } from "../../../commons/store";
import { useEffect } from "react";
import { ErrorResponse, onError } from "@apollo/client/link/error";
import { getAccessToken } from "../libraries/getAccessToken";

const GLOBAL_STATE = new InMemoryCache();
interface IApolloSettingProps {
  children: JSX.Element;
}

export default function ApolloSetting(props: IApolloSettingProps) {
  const [accessToken, setAccessToken] = useRecoilState(accessTokenState);
 
  useEffect(() => {
    const result = localStorage.getItem("accessToken");
    console.log(result);
    console.log("현재는 브라우저입니다");
    setAccessToken(result ?? "");
  }, []);

  const errorLink = onError(({ graphQLErrors, operation, forward }) => {
    //1-1.에러캐치
    if (typeof graphQLErrors !== "undefined") {
      for (const err of graphQLErrors) {
        //1-2.토큰 만료에러인지 체크
        if (err.extensions?.code === "UNAUTHENTICATED") {
          return fromPromise(

            getAccessToken()
              .then((newAccessToken) => {
                setAccessToken(newAccessToken ?? "");
                operation.setContext({
                  headers: {
                    ...operation.getContext().headers,
                    Authorization: `Bearer ${newAccessToken}`,
                  },
                });
              })
              .catch((err) => {
                console.log("오류입니다");
              }),
          ).flatMap(() => forward(operation));
        }
      }
    }
  });

  const uploadLink = createUploadLink({
    uri: "https://backend-practice.codebootcamp.co.kr/graphql",
    headers: {
      Authorization: `Bearer ${accessToken}`,
      credentials: "include",
    },
  });

  const client = new ApolloClient({
    link: ApolloLink.from([errorLink, uploadLink]),
    uri: "http://backend-practice.codebootcamp.co.kr/graphql",
    cache: GLOBAL_STATE, 
  });
  return <ApolloProvider client={client}>{props.children}</ApolloProvider>;
}

로그인 success의 코드

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

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

export default function LoginPage() {
  const client = useApolloClient();

  const onClickButton = async (): Promise<void> => {
    const result = await client.query({
      query: FETCH_USER_LOGGED_IN,
    });
    console.log(result);
  };

  return (
    <>
      {/* <div>{data?.fetchUserLoggedIn.name}님, 환영합니다.</div> */}
      <div>환영</div>
      <button onClick={wrapAsync(onClickButton)}>클릭하세요</button>
    </>
  );
}