FE용 BE에서 GraphQL 열거형 구하기 ⚓️

백엔드(BE) 그래프 API에 정의된 열거형 상수를 가져오는 데 활용introspection queries하여 해당 프런트엔드(FE) 인터페이스에서 사용합니다.

소규모 및 모놀리식 프로젝트의 경우 둘 다 참조할 수 있는 공유 폴더에 GraphQL 유형을 정의하는 것이 쉽습니다. 그러나 현재 작업 중인 프로젝트의 FE & BE는 격리된 마이크로 서비스이며 별도의 리포지토리에 있습니다.

Enums은 정의한 유형과 밀접하게 연결되어 있으므로 서비스 계층에 상주합니다. 그러나 클라이언트가 이러한 열거형도 알아야 하는 경우가 있습니다(예: 불연속 값의 드롭다운).


이를 FE로 가져오는 방법에는 여러 가지가 있습니다.

BE에서 FE 코드베이스로 복사하여 붙여넣을 수 있지만 이는 나쁜 습관입니다. 🤔

간단한 끝점이 이러한 열거형을 제공할 수 있지만 구축/유지 관리에 노력이 필요합니다. 🤔

유형/열거형의 공유 라이브러리는 두 저장소에서 모두 의존할 수 있지만 업데이트를 유지하기가 어렵습니다. 🤔

또는 GraphQL의 내장 IntrospectionQuery 을 사용하여 이를 결정할 수 있습니다. 최근에 FE 응용 프로그램의 첫 번째 메서드에서 리팩토링하는 데 사용했습니다. ✅

은유를 위해 회수/보물 예를 사용하고 있지만 BE가 죽거나 망가졌다는 의미는 아닙니다! 그것은 매우 정반대입니다. 저는 은유를 좋아해서 그것을 고수합니다. 😁

BE 🔩에서 열거형 정의

자세히 다루지는 않겠지만 다음과 같이 열거형이 정의된 스키마가 있는 그래프 서비스가 있다고 가정해 보겠습니다.

enum TreasureTypeEnum {
    GOLD_DOUBLOON,
    SILVER_COIN,
    EMERALD_RING
}

FE에서 가져오는 중 🤿

인트로스펙션 쿼리는 마법과도 같습니다. 주로 API가 지원하는 쿼리를 반환하지만 더 자세히 살펴보면 지원되는 열거형 값을 제공할 수 있습니다. 열거형 이름을 매개변수로 사용하는 일반 열거형 값 검사 쿼리를 생성하기만 하면 됩니다.

import gql from 'graphql-tag';

const EnumValuesIntrospectionQuery = gql`
    query ($name: String!) {
        __type(name: $name) {
            enumValues {
                name
            }
        }
    }
`;

그런 다음 이를 사용하여 유형의 값을 가져옵니다.

import { useQuery } from 'react-apollo';

const {
    loading, error, data
} = useQuery(EnumValuesIntrospectionQuery, {
    variables: {
        name: "TreasureTypeEnum"
    }
});

const { __type: { enumValues } } = data;
const formattedEnumValues = enumValues.map(({ name }) => name);

console.log(formattedEnumValues);

// > ["GOLD_DOUBLOON", "SILVER_COIN", "EMERALD_RING"]

더 예쁜 디스플레이(예: 레이블)의 경우 CSS를 통해 공백 및 text-transform: capitalize의 밑줄을 대체하는 간단한 포맷터가 트릭을 수행합니다.

이제 인양한 보물을 드롭다운으로 렌더링할 수 있으므로 승무원은 HTML 형식에서 원하는 것을 선택할 수 있습니다. 🏴‍☠️




읽어 주셔서 감사합니다! 누구든지 BE와 일치하는 FE의 열거형을 유지하기 위해 다른/더 나은 접근 방식을 가지고 있습니까?