이미 ApolloClient를 생성한 상태인 클라이언트에서 linkChain 수정하기

왜 필요한가?

모든 예제가 localStorage에서 userToken을 받아오는데, 우리는 Context가 Initializing된 이후에 Authorization 헤더를 지정하고 싶다. ApolloClient는 로그인 로직 전에 생성되니까, setContext로 linkChain을 수정하는 펑션에서 Context를 받아와도 당연히 처리가 안된다. 조금 당황스러운 점은 아예 Apollo 전체가 터지더라. 오류도 안나서... 조금 당황스러웠다.

애매하게 공식 문서에 찾아보니까 없더라. 내가 못찾은건가 ㅋㅋ

어떻게 가능한가?

apollo-client v3.0.0 PR들 중에 new ApolloClient() 가 호출된 이후에 ApolloLink를 수정할 수 있는 펑션인 setLink 가 추가됬다고 한다. (#6193 PR) (stackoverflow 고마워요)

어떻게 하나?

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

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

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

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

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

귀찮은 사람들은 굳이 따로 지정하는 함수 안만들고 client에 client.setLink 때려도 될 것 같고.

Reference

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