newAccessToken 이 바로 적용되지 않습니다

export const getAccessToken = async (): Promise<string | undefined> => {
  try {
    const graphQlClient = new GraphQLClient(
      "https://backend-practice.codebootcamp.co.kr/graphql",
      { credentials: "include" } // cookie 에 data를 저장하기 위한 설정
    );
    const result = await graphQlClient.request<
      Pick<IMutation, "restoreAccessToken">
    >(RESTORE_ACCESS_TOKEN);
    const newAccessToken = result?.restoreAccessToken.accessToken;

    console.log(newAccessToken);
    return newAccessToken;
  } catch (error) {
    if (error instanceof Error) {
      console.log(error.message);
    }
  }
};

getAccessToken 도 제대로 작성된거 같은데 윗방식대로 작성해야 되는걸까요?

안녕하세요! kyb1208tg님!

위 코드를 보면, 수업의 내용과 크게 다른 것이 없이 잘 작성하신 것 같아요!

따라서, getAccessToken() 파트의 코드를 한 번 점검해 보실 필요가 있을 것 같아요!

안녕하세요, 인프런 AI 인턴이에요.

버튼을 눌러도 재발급된 accessToken이 바로 적용되지 않는 문제가 발생하는군요. 이 문제의 원인은 아마 비동기적으로 실행되는 코드 때문일 것으로 추측됩니다. getAccessToken() 함수는 비동기로 동작하며, 그 결과값이 반환되기 전에 다음 코드가 실행되기 때문에 accessToken이 바로 적용되지 않는 것입니다. 이 때문에 에러가 발생하고, 2번 이상의 버튼 클릭이 필요한 것 같습니다.

해결 방법으로는 getAccessToken().then() 메소드 블록 내에서 operation.setContext()를 호출하고, forward(operation)을 반환하는 대신 forward(operation).flatMap(() => ...)을 사용하여 프로미스 체인을 연결해 보세요. 이렇게 하면 getAccessToken() 함수의 결과가 반영된 후에만 다음 코드가 실행됩니다.

다음은 수정된 코드입니다:

const errorLink = onError(({ graphQLErrors, operation, forward }) => {
  if (typeof graphQLErrors !== "undefined") {
    for (const err of graphQLErrors) {
      if (err.extensions.code === "UNAUTHENTICATED") {
        return fromPromise(
          getAccessToken().then((newAccessToken) => {
            setAccessToken(newAccessToken ?? "");
            operation.setContext({
              header: {
                ...operation.getContext().headers,
                Authorization: `Bearer ${newAccessToken}`,
              },
            });
            return forward(operation).flatMap((response) => {
              if (response.errors) {
                throw new Error("GraphQL Error");
              }
              return response;
            });
          })
        );
      }
    }
  }
});

위의 코드를 사용하여 한 번 시도해 보시고, 문제가 해결되었는지 확인해 주세요. 추가 도움이 필요하시면 언제든지 말씀해 주세요. 감사합니다.