graphQL 예외처리

프론트의 예외 처리

백엔드에서 프론트로 데이터를 받아올 시 그 데이터가 null 이거나 undefined 일 수 있으므로, 프론트단에서는 이를 예외처리 시켜주어야 한다.

 

다음과 같이 brand 의 데이터 타입이 정의되어 있다.

 

 

 

brand 중에 name 과 brandGroup 의 name 을 뽑아서 사용할 건데

이를 각각 brandName, brandGroupName 이라고 정의하겠다.

 

 

내가 사용하는 코드는 코드가 너무 길기 때문에 가독성을 위해 brandTree 라는 함수를 만들어서 따로 예외처리를 해주겠다.

 

      const { brandName, brandGroupName } = brandTree(brand);

 

 

 

 

brandTree 함수

 

const brandTree = (
  brand:
    | {
        __typename?: "Brand" | undefined;
        name: string;
        brandGroup?:
          | {
              __typename?: "BrandGroup" | undefined;
              name: string;
            }
          | null
          | undefined;
      }
    | null
    | undefined,
) => {
  if (isUndefined(brand) || isNull(brand))
    return { brandName: "", brandGroupName: "" };
  const { name: brandName, brandGroup } = brand;
  if (isUndefined(brandGroup) || isNull(brandGroup))
    return { brandName, brandGroupName: "" };
  const { name: brandGroupName } = brandGroup;
  return { brandName, brandGroupName };
};

 

먼저 isUndefined 와 isNull 을 사용해주어야 코드가 간결하게 정리가 된다.

 

참고로 isUndefined, isNull 메서드는 lodash 라는 라이브러리에서 갖고 온 것이다.

 

 

 

 

 

 

 

 

 

응용

여기서부턴 더 복잡한 타입(데이터 안에 데이터 반복..) 을 알아보자.

 

 

salesman 의 데이터 타입은 다음과 같다.

 

 

나는 salesman 에서 user 의 name 과 agency 의 name 과 AgencyGroup 의 name 을 사용할 것이다.

 

 

 

이것도 역시 복잡하므로 가독성을 위해 agencyTree 라는 함수를 이용할 것이다.

 

const { salesmanName, agencyName, agencyGroupName } =
        agencyTree(Salesman);

 

 

 

 

타입도 너무 길기 때문에 가독성을 위해 타입도 따로 빼주자.

 

type AgencyTree =
  | {
      __typename?: "Salesman" | undefined;
      user: {
        __typename?: "User" | undefined;
        name?: string | null | undefined;
      };
      agency?:
        | {
            __typename?: "Agency" | undefined;
            name: string;
            AgencyGroup?:
              | {
                  __typename?: "AgencyGroup" | undefined;
                  name: string;
                }
              | null
              | undefined;
          }
        | null
        | undefined;
    }
  | null
  | undefined;

 

 

 

 

agencyTree 함수

 

const agencyTree = (salesman: AgencyTree) => {    // AgencyTree 타입
  if (isUndefined(salesman) || isNull(salesman))
    return { salesmanName: "", agencyName: "", agencyGroupName: "" };
  const {
    user: { name },
    agency,
  } = salesman;
  const salesmanName = name || "";
  if (isUndefined(agency) || isNull(agency))
    return {
      salesmanName,
      agencyName: "",
      agencyGroupName: "",
    };
  const { name: agencyName, AgencyGroup } = agency;
  if (isUndefined(AgencyGroup) || isNull(AgencyGroup))
    return {
      salesmanName,
      agencyName,
      agencyGroupName: "",
    };
  const { name: agencyGroupName } = AgencyGroup;
  return { salesmanName, agencyName, agencyGroupName };
};