[GraphQL] Error handling, 서버 Response는 array 인데, 클라이언트에선 다른 응답을 받을 때

GraphQL을 공부하고 있는데,

Authorization 을 위한, 미들웨어를 달고 있다.

쿠키에, JWT 토큰을 검증하는 미들웨어를 달았는데,

Error 가 Client레벨에서, 타입이 계속 바뀐다. (Error Type으로 출력이 됨, console에서)

 

나는, 클라이언트에서 status code 가 401 으로 나올 때, Not Authorized 처리를 하고 싶은 건데,

이렇게 나오니, 분기를 할수가 없다.

 

무슨 이야기인고 하니,

서버에서 보내는 Response

실제로 내가 console찍었을 떄 얻는 error

산 너머 산인듯

처음에는, 구글 Oauth2를 GraphQL 에서 사용해보려고 삽질했는데,

넘어오니까, 생각치도 못한 곳에서 에러를 발견하게 된다.

 

 

------

해결

 

문제의 해결은, 클라이언트랑, 서버랑 연결할 때  ApolloClient 객체에, link를 설정해주면 됨.

apollo/errorLink.ts

import { onError } from "@apollo/client/link/error";

export const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors)
    graphQLErrors.forEach(({ message, locations, path }) => {
      console.log(graphQLErrors);

      console.log(
        `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
      );
    });
  if (networkError) console.error(`[Network error]: ${networkError}`);
});

const client = new ApolloClient({
  uri: process.env.REACT_APP_SERVER,
  cache: new InMemoryCache(),
  ... ,
  link: from([errorLink, httpLink])
});

찾아볼 Api는, onError임

https://www.apollographql.com/docs/react/api/link/apollo-link-error/#options

 

 

ApolloQL 자체가, 

일반 http 서버 랑, 생리 자체가 다른듯.

 

당연히, 리액트니까 에러는 비동기 통신 api 호출 이후,  error 변수에서 할 줄 알았는데,

ApolloClient는 서버랑 커넥션 하는 단계에서, layer하나가 더 있는듯.

일종의 미들웨어 처럼, 결과가 error 변수에 도달하기 전에, 

중간에서 한번 핸들링 할 수 있는, 구조 인듯 하다.

// 여기까지 오기전에, 한번 middleware 처럼, 중간 레이어에서 원하는 작업을 processing 할 수 있음
[error, ... ]=useQuery(QUERY_REQUEST)

 

 

refresh token, accessToken 같은 것도, 처리하기 훨씬 쉬울 듯.

 

참고할 만한 다른 글:  https://scribbler-jimmy.tistory.com/61