ApolloClient linkChain 수정

왜 필요한가?

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

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

어떻게 가능한가?

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

어떻게 하나?

간단하다. setLink 를 이용하여 수정하는 함수 같은걸 만들어주면 된다.

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]));
};

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

Reference

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