GraphQL로 스포츠 팀 API 구축 - Hasura - 2부

이 포스트는 시리즈 포스트의 일부이므로 이전 포스트를 읽지 않으셨다면 이전 포스트를 읽고 다시 오셔서 기다리겠습니다 :)

이 게시물의 목표

소개

일대일 테이블 관계란 무엇입니까

지원 직원 테이블 생성

Teams 테이블을 지원 직원과 연결

Hasura에서 관계 업데이트

데이터 가져오기

소개

첫 번째 부분에서는 팀 테이블을 만드는 방법과 GraphQL 쿼리를 사용하여 테이블에서 데이터를 가져오는 방법을 배웠습니다.

BUILD SPORTS TEAM API WITH GRAPHQL - HASURA - PART 1

팀에 선수를 추가하기 전에 먼저 팀의 헤드 코치를 추가하는 데 중점을 둘 것입니다. 일대일 테이블 관계에 대해 알아보겠습니다.

일대일 테이블 관계란?

우리 팀의 경우 수석 코치는 한 명만 있을 수 있고 수석 코치의 경우 그가 관리하는 팀은 한 팀뿐입니다. 이 관계를 일대일 관계라고 하며 테이블에 외래 키를 추가하여 표현할 수 있습니다. 외래 키는 다른 테이블의 기본 키를 나타냅니다.

지원 직원 테이블 생성

지원 직원의 세부 정보가 포함된 지원 직원 테이블을 만들어 보겠습니다. 우리는 직원에 대한 간단한 정보를 가질 수 있으며 필요한 경우 데이터를 확장할 수 있습니다.

Teams 테이블을 지원 직원과 연결

part 1에서 생성한 팀 테이블을 열고 아래와 같이 새 열을 추가합니다.

열 이름: head_coach_id, 유형: 텍스트, Null 허용: True



새 열이 있으면 SupportStaff 테이블이 이 열이 다른 테이블의 행을 참조한다는 것을 알 수 있도록 외래 키 관계를 teams 테이블에 추가해야 합니다.
Modify 탭을 연 다음 Foreign Keys 섹션으로 이동합니다. 이 위치에 다른 테이블id 열을 연결하는 새 외래 키를 추가할 수 있습니다.

Hasura에서 관계 업데이트

외래 키 관계를 정의한 후에도 SupportStaff 테이블 내부의 데이터에 더 쉽게 액세스할 수 있도록 Hasura GraphQL 엔진에서 관계를 생성해야 합니다.

왜요 ?

바로 지금 데이터를 SupportStaff 테이블에 삽입한 다음 해당 ID를 팀 테이블에 추가하고 간단한 GraphQL 쿼리를 만들어 데이터를 가져오면 반환될 head_coach의 실제 ID일 뿐입니다.

query MyQuery {
  teams {
    team_name
    head_coach_id
  }
}

OUTPUT:
{
  "data": {
    "teams": [
      {
        "team_name": "Australia Cricket Team",
        "head_coach_id": 2
      },
      {
        "team_name": "Indian Cricket Team",
        "head_coach_id": 1
      },
      {
        "team_name": "England Cricket Team",
        "head_coach_id": 3
      }
    ]
  }
}

이것은 최종 사용자에게 그다지 유용하지 않습니다. 데이터를 표시할 때 ID 대신 코치 이름을 표시할 수 있습니다. 따라서 데이터를 가져올 때 이를 간단하게 만들기 위해 Hasura에서 관계를 만들 수 있습니다.
Relationships 테이블에서 teams 탭을 열면 Hasura가 개체 관계를 제안하는 것을 볼 수 있습니다. 관계를 추가하고 이름을 지정할 수 있습니다head_coach.

데이터 가져오기

이 작업이 완료되면 이제 아래 GraphQL 쿼리를 사용하여 head_coach 이름을 쿼리할 수 있습니다. 이제 관계에서 지정한 이름이 별도의 필드로 작동하고 해당 필드를 드릴다운하여 다른 테이블에 있는 데이터를 찾을 수 있습니다. 따라서 단일 쿼리에서 두 개의 별도 테이블의 데이터가 있고 이 데이터를 앱의 UI에 쉽게 표시할 수 있습니다.

query MyQuery {
  teams {
    team_name
    head_coach_id
    head_coach {
      staff_name
    }
  }
}

OUTPUT:
{
  "data": {
    "teams": [
      {
        "team_name": "Australia Cricket Team",
        "head_coach_id": 2,
        "head_coach": {
          "staff_name": "Staff 2"
        }
      },
      {
        "team_name": "Indian Cricket Team",
        "head_coach_id": 1,
        "head_coach": {
          "staff_name": "Staff 1"
        }
      },
      {
        "team_name": "England Cricket Team",
        "head_coach_id": 3,
        "head_coach": {
          "staff_name": "Staff 3"
        }
      }
    ]
  }
}

다음 단계

다음으로 일대다 관계에 대해 알아보기 위해 팀에 더 많은 지원 직원을 추가한 다음 팀에 플레이어 데이터를 추가하기 시작할 것입니다.

메일링 리스트를 구독하고 Discord 커뮤니티에 가입하여 계속 지켜봐 주세요.

Discord