ApolloClient 선언 후 link 체인 수정하기

왜 필요한가?

모든 예제가 localStorage에서 userToken을 받아오는데, 나는 로그인 후에 Authorization 헤더를 넣고 싶다. 다른 객체를 커스텀 훅에서 받아오는 방식 등을 사용하는 것이 아닌 선언된 ApolloClient에 의존하는 방식을 사용하는 나는, ApolloClient는 로그인 전에 선언되는 것은 당연한 것이였고, link 체인을 수정하여 Authorization 헤더를 수정하여야 했다.

어떻게 가능한가?

apollo-client v3.0.0 PR들 중에 new ApolloClient() 가 호출된 이후에 ApolloLink를 수정할 수 있는 함수인 setLink 가 추가됐다고 한다. (#6193 PR)

별 어려운 함수는 아니고, 그냥 link를 바꿀 수 있다.

어떻게 하나?

ApolloClient 객체에 존재하고, linkChain을 교체하는 역할을 하기 때문에 나는 apollo.ts 파일을 하나 만들어서 다른 Link(체인 요소)들은 유지하고, AuthLink만 교체해주었다.

export const replaceAccessTokenOnClient = (
  client: ApolloClient<NormalizedCacheObject>,
  accessToken?: string,
) => {
  const newAuthLink = setContext((operation, prevContext) => {
    return {
      ...prevContext,
      headers: {
        ...prevContext.headers,
        Authorization: accessToken ? `Bearer ${accessToken}` : '',
      },
    };
  });
  client.setLink(from([newAuthLink, errorLink, httpLink]));
};

쓰고 보니까 설명을 좀 어지럽게 쓴 것 같은데...

return new ApolloClient({
  link: from([authLink, errorLink, httpLink]),
});

그냥 ApolloClient 호출할 때 넣은 link 내용 넣어주면 된다.

마치며

물론 이 글에서 알려주는 방법이 답이 아닐 수 있다. 직접 알아보고 시도해보자.

그리고 하단에 기재된 출처의 StackOverflow 유저분과 PR을 만들어주신 분들 모두 감사합니다...

Reference

• https://stackoverflow.com/a/64582569