초보자를 위한 GraphQL 튜토리얼: 정의, 기능 및 예

GraphQL이란 무엇입니까?

GraphQL GraphQL은 페이스북(현재 Meta)에서 개발한 애플리케이션 계층 서버 측 기술로, 기존 데이터를 사용하여 쿼리를 실행하는 데 사용됩니다. 2015년에 공개되었으며 GraphQL 프레임워크의 적용을 받습니다. Foundation 2018년부터 사용되어 온 GraphQL은 RESTful API 호출을 최적화할 수 있습니다. 데이터를 가져오고 업데이트하는 선언적인 방식을 제공하며, 서버에서 클라이언트로 데이터를 로드하는 데 도움을 줍니다. 또한 프로그래머가 원하는 요청 유형을 선택할 수 있도록 해줍니다.

GraphQL을 배우기 전에 무엇을 배워야 할까요?

이 GraphQL 튜토리얼은 다음을 기반으로 합니다. Express NodeJ. 따라서 NodeJS에 대한 기본적인 이해가 있어야 GraphQL을 아주 쉽게 배울 수 있습니다.

GraphQL을 사용하는 이유는 무엇입니까?

GraphQL을 사용하는 이유는 다음과 같습니다.

• 사람이 읽을 수 있는 쿼리를 제공합니다.
• GraphQL에서는 여러 데이터베이스를 다루는 것이 매우 쉽습니다.
• 마이크로서비스와 복잡한 시스템에 적합합니다.
• 단일 API 호출로 데이터를 가져올 수 있습니다.
• 쿼리 일괄 처리 및 캐싱에 도움이 됩니다.
• 과도한 가격 책정이나 가격 부족 문제를 겪지 않으실 겁니다.
• 귀하의 필요에 맞게 요청을 조정합니다.
• 적절한 형식의 스키마를 검색하는 데 도움이 됩니다.
• GraphQL은 API 변경 사항에 맞춰 문서를 자동으로 동기화합니다.
• 버전 관리 없이 API 발전이 가능합니다.
• GraphQL 필드는 재사용을 위해 더 높은 구성 요소 수준으로 공유할 수 있는 여러 쿼리에 사용됩니다.
• 노출할 기능과 작동 방식을 선택할 수 있습니다.
• 신속한 애플리케이션 프로토타입 제작에 사용할 수 있습니다.ping.

GraphQL의 응용

GraphQL의 중요한 애플리케이션은 다음과 같습니다.

• Relay 및 기타 클라이언트 프레임워크를 제공합니다.
• GraphQL은 모바일 앱의 성능을 향상시키는 데 도움이 됩니다.
• 과도한 가져오기 문제를 줄여 서버 측 클라우드 서비스를 낮추고 클라이언트 측 네트워크 사용량을 줄일 수 있습니다.
• 클라이언트 애플리케이션이 긴 쿼리 형식에 필요한 필드를 지정해야 할 때 사용할 수 있습니다.
• GraphQL은 이전 API 또는 기존 API에 기능을 추가해야 할 때 완벽하게 활용될 수 있습니다.
• 복잡한 API를 단순화해야 할 때 사용됩니다.
• 객체 지향 프로그래밍에 일반적으로 사용되는 파사드 패턴을 혼합하고 매쉬합니다.
• 여러 곳의 데이터를 하나의 편리한 API로 집계해야 하는 경우.
• GraphQL을 절대적인 방법으로 사용할 수 있습니다.trac기존 API를 기반으로 사용자 요구에 따른 응답 구조를 지정하는 기능입니다.

그러한 이점들은 모두 세 가지 핵심 요소가 함께 작동하는 데 달려 있습니다.

GraphQL 주요 구성요소

이제 이 GraphQL 튜토리얼에서는 GraphQL의 주요 구성 요소를 배워 보겠습니다.

위 그림에서 볼 수 있듯이 GraphQL의 세 가지 주요 구성 요소는 1) Query, 2) Resolver, 3) Schema입니다.

질문

쿼리는 클라이언트 시스템 애플리케이션에서 수행한 API 요청입니다. 이는 증가를 지원하고 배열을 가리킵니다. 쿼리는 값을 읽거나 가져오는 데 사용됩니다.

쿼리 부분:

다음은 Query의 중요한 부분입니다.

1. 들:

필드는 단순히 서버에 특정 정보를 요청한다는 것을 나타냅니다. 다음은 GraphQL 쿼리에서 필드를 사용하는 GraphQL 예시입니다.

query {
    team {
        id
        name
    }
}

서버는 쿼리와 동일한 형태의 JSON 문서로 응답합니다.

{
    "data": {
        "team": [
            {
                "id": 1,
                "name": "Avengers"
            }
        ]
    }
}

위의 GraphQL 예제에서 우리는 서버에 'team'이라는 필드와 그 하위 필드인 'id'와 'name'을 요청합니다. GraphQL 서버는 우리가 요청한 데이터를 정확하게 반환합니다.

2. 인수

In REST우리는 하나의 인자 세트만 전달할 수 있습니다. URL 세그먼트 및 쿼리 매개변수. 특정 프로필을 얻으려면 일반적인 REST 호출은 다음과 같습니다.

GET /api/team?id=2
Content-Type: application/json

{
    "id": 2,
    "name": "Justice League"
}

해결

리졸버는 GraphQL 작업을 데이터로 변환하기 위한 지침을 제공합니다. 리졸버 함수를 정의하여 쿼리를 데이터로 해결합니다.

특정 필드에 따라 데이터를 가져오는 프로세스와 위치를 서버에 표시합니다. 또한 확인자는 데이터베이스 스키마와 API 스키마를 분리합니다. 분리된 정보는 데이터베이스에서 얻은 콘텐츠를 수정하는 데 도움이 됩니다.

개요

GraphQL 스키마는 GraphQL 구현의 중심입니다. 여기에는 연결 중인 클라이언트가 사용할 수 있는 기능이 설명되어 있습니다.

GraphQL의 특징

GraphQL의 중요한 기능은 다음과 같습니다.

• 이는 필수가 아닌 선언적 쿼리 언어를 제공합니다.
• 계층적이고 제품 중심적입니다.
• GraphQL은 강력한 타입입니다. 즉, 쿼리는 특정 시스템의 컨텍스트 내에서 실행됩니다.
• GraphQL의 쿼리는 서버가 아닌 클라이언트에서 인코딩됩니다.
• OSI 모델의 애플리케이션 계층의 모든 기능을 갖추고 있습니다.

GraphQL 클라이언트

GraphQL 클라이언트는 해당 GraphQL 서버에 POST 요청을 보내는 코드입니다. GraphQL API를 직접 쿼리할 수 있지만 좋은 접근 방식은 Relay를 사용하여 전용 클라이언트 라이브러리를 활용하는 것입니다.

이 Java이 스크립트 라이브러리는 페이스북에서 React 애플리케이션을 GraphQL로 개발하기 위해 만들어졌습니다. GraphQL 클라이언트는 Drupal과 같은 CMS, 단일 페이지 애플리케이션, 모바일 애플리케이션 등이 될 수 있습니다.

GraphQL 서버

GraphQL 서버는 GraphQL 사양의 서버 측 구현체입니다. 데이터를 GraphQL API 형태로 제공하며, 클라이언트 프로그램은 이 API를 통해 데이터를 조회할 수 있습니다. 데이터베이스.

GraphQL 게이트웨이

게이트웨이는 마이크로서비스 패턴으로, 다른 백엔드 서비스들을 처리하기 위해 별도의 서비스를 구축할 수 있습니다. 게이트웨이는 실용적인 문서화를 제공하며, 단일 요청으로 여러 소스에서 데이터를 편리하게 수집할 수 있는 방법을 제시합니다.

GraphQL은 쿼리에서 동적으로 발생하는 값을 분리하는 좋은 방법 중 하나를 제공합니다. 바로 이러한 값들을 별도의 딕셔너리로 ​​전달하는 것입니다. 이러한 값들을 변수라고 합니다. 변수를 다룰 때는 다음 세 가지 사항을 고려해야 합니다.

1. 쿼리의 정적 값을 변수 이름으로 바꿉니다.
2. GraphQL 쿼리에서 허용되는 변수 중 하나로 변수 이름을 선언합니다.
3. 전송별 변수 사전에 값을 전달합니다.

전체적인 모습은 다음과 같습니다. 먼저 변수를 선언하는 쿼리부터 살펴보겠습니다.

query HeroNameAndFriends($episode: Episode) {
    hero(episode: $episode) {
        name
        friends {
            name
        }
    }
}

그런 다음 변수 값들이 담긴 별도의 사전이 함께 전송됩니다.

{
    "episode": "JEDI"
}

서버에서 반환된 응답은 다음과 같습니다.

{
    "data": {
        "hero": {
            "name": "R2-D2",
            "friends": [
                { "name": "Luke Skywalker" },
                { "name": "Han Solo" },
                { "name": "Leia Organa" }
            ]
        }
    }
}

위의 GraphQL 예제에서 볼 수 있듯이 새 쿼리를 생성할 필요 없이 단순히 다른 변수를 전달했습니다.

돌연변이란 무엇입니까?

돌연변이는 GraphQL에서 데이터 세트를 변경하는 방법입니다. 데이터 저장소의 데이터를 수정하고 값을 반환합니다. 돌연변이는 데이터를 삽입, 업데이트 또는 삭제하는 데 도움이 됩니다. 일반적으로 변형은 스키마 부분으로 정의됩니다.

GraphQL 변이를 설계할 때 고려해야 할 사항

GraphQL을 설계할 때 중요한 점은 다음과 같습니다.

• 명명: 우선, 돌연변이 동사의 이름을 지정해야 합니다. 그런 다음 해당되는 경우 명사 또는 "객체"입니다. 돌연변이 이름을 지정할 때 camelCase를 사용하세요.
• 특성: 가능한 한 돌연변이 특이적이어야 합니다. 돌연변이는 사용자가 취한 의미론적 작업을 나타내야 합니다.
• 입력 개체: 클라이언트에서 변형을 실행하기 위한 인수로 고유하고 필수 입력 개체 유형을 사용하세요.
• 고유한 페이로드 유형: 모든 변형에 대해 고유한 페이로드 유형을 사용해야 합니다. 특정 페이로드 유형에 변형 출력을 필드로 추가할 수도 있습니다.
• 중첩: 의미가 있는 곳이면 어디든 돌연변이에 중첩을 사용하세요. GraphQL API를 완벽하게 활용할 수 있습니다.

쿼리는 데이터를 읽고, 변경은 데이터를 씁니다. 세 번째 작업 유형은 클라이언트가 연결된 상태에서 변경되는 데이터를 다룹니다.

GraphQL에서 구독이란 무엇인가요?

A 신청 구독(Subscription)은 GraphQL 사양에서 쿼리(Query) 및 뮤테이션(Mutation)과 함께 세 번째 작업 유형입니다. 쿼리와 뮤테이션은 각각 하나의 요청과 응답으로 완료됩니다. 반면 구독은 일반적으로 웹소켓(WebSockets)을 통해 장기간 연결을 유지하므로, 서버는 지정된 이벤트가 발생할 때마다 클라이언트에 새로운 결과를 푸시합니다.

구문은 쿼리와 유사하며, '구독'이라는 키워드가 '쿼리'를 대체합니다.

subscription OnCommentAdded($postId: ID!) {
    commentAdded(postId: $postId) {
        id
        content
        author {
            name
        }
    }
}

실제로 구독 서비스는 세 가지 주요 특징으로 구분됩니다.

• 이벤트 기반 방식이며, 폴링 방식이 아닙니다. 클라이언트는 관심을 한 번만 등록합니다. 서버가 일치하는 이벤트를 게시할 때까지 추가적인 데이터는 전송되지 않으며, 이는 반복적인 폴링보다 훨씬 비용 효율적입니다.
• 구독당 하나의 루트 필드: 사양에서는 최상위 필드를 하나만 허용하지만, 쿼리에서는 여러 필드를 한 번에 요청할 수 있습니다.
• 작게 유지하는 것이 가장 좋습니다: 인터페이스가 새로 고쳐야 하는 필드만 푸시하세요. 실시간 채팅, 알림, 가격 표시 등이 일반적인 사용 사례입니다.

GraphQL과 REST의 차이점

다음 표는 다음의 중요한 차이점을 보여줍니다. GraphQL과 REST.

GraphQL에서 사용하는 오픈 소스 앱 및 도구

GraphQL에서 사용하는 중요한 오픈 소스 앱과 도구는 다음과 같습니다.

• 개츠비Gatsby는 GraphQL 기반 애플리케이션으로, 여러 GraphQL API 소스에서 가져온 데이터를 사용할 수 있습니다. 이를 사용하여 정적 및 클라이언트 기반 React 애플리케이션을 개발할 수 있습니다.
• 그라피큐엘: GraphiQL은 브라우저와 통합되는 IDE이며, GraphQL API와도 상호 작용합니다. GraphiQL에는 뮤테이션, 데이터 쿼리, 쿼리 자동 완성 등의 기능이 포함되어 있습니다.
• GraphQL 플레이그라운드: 이 프로젝트는 뮤테이션, 유효성 검사, GraphQL 쿼리, 구독 등을 처리할 수 있는 내장 에디터를 갖춘 강력한 IDE입니다. 개발자는 이 IDE를 사용하여 스키마 구조를 시각화할 수 있습니다. 이 프로젝트는 현재 개발이 중단되었으며, 관련 기능은 GraphiQL에 통합되었습니다.
• 프리즘: Prisma는 데이터베이스 ABS입니다.trac이제 타입 안전 ORM으로 제공되는 이 계층은 GraphQL 서버와 널리 결합되어 CRUD(생성, 읽기, 업데이트 및 삭제) 작업을 제공합니다.
• 비트: 재사용 가능한 코드를 구성 요소로 변환하는 오픈 소스 도구이자 플랫폼입니다. 개발자는 이를 활용하여 다양한 프로젝트를 공유하고 개발할 수 있습니다.

자주 묻는 질문