Thinking in GraphQL🧚

• GraphQL 은 데이터를 그래프로 구성한다.
  • 그래프는 Node(객체 혹은 레코드)와 Edge(한 노드에서 다른 노드로 가는 포인터)로 구성된다.

• 한 노드에서 다른 노드로 가는 엣지를 따라가서, 방문하는 각 노드에 대한 정보를 요청 가능함!

query {
  person(id: "24601") {
    name
    occupation
    location {
      name
      population
    }
  }
}

• 여기서 location은 city 에 대한 edge가 됨!
• GraphQL 서버에서는 스키마를 제공하고, 이 스키마를 통해서 노드의 종류, 노드가 어떻게 연결되는지, 각 노드에 어떤 정보가 포함되어있는지 설명이 됨.

Edge

• SimpleEdge
  • 단순 관계 사용. 메타데이터 필요 없음.

type User {
  id: ID!
  name: String!
  friends: [User]     # 단순 배열 관계
  city: City          # 단일 관계
}

• Complex Edge (메타데이터가 필요한 관계)
  • 페이지네이션 혹은 메타데이터가 필요할 때

type User {
  id: ID!
  name: String!
  friends: FriendsConnection  # Connection 패턴 사용
}

# Edge에 메타데이터 포함
type FriendsConnection {
  edges: [FriendEdge]
  pageInfo: PageInfo!
}

type FriendEdge {
  node: User              # 실제 친구 데이터
  cursor: String!         # 페이지네이션 정보
  friendshipDate: String  # 관계의 메타데이터
  isCloseFriend: Boolean  # 추가 메타데이터
}

Connection 패턴이란?

• 페이지네이션에 사용됨!

type User {
  id: ID!
  friends(
    first: Int        # 한 페이지당 갯수
    after: String     # 커서 이후의 데이터
    last: Int         # 뒤에서부터 가져올 때
    before: String    # 커서 이전의 데이터
  ): FriendsConnection
}

type FriendsConnection {
  edges: [FriendEdge]
  pageInfo: PageInfo!
  totalCount: Int     # 전체 갯수
}

type FriendEdge {
  node: User          # 실제 데이터
  cursor: String!     # 페이지네이션 커서
}

type PageInfo {
  hasNextPage: Boolean!
  hasPreviousPage: Boolean!
  startCursor: String
  endCursor: String
}

이런 그래프 구조처리는 어떻게 하는걸까? -> resolver

• 아래와 같은 스키마가 있다고 하면,

# 스키마 정의
type User {
  id: ID!
  name: String!
  friends: [User]
  city: City
}

type City {
  id: ID!
  name: String!
  residents: [User]
}

• 서버측에서 리졸버를 추가한다.

// Resolver 예시
const resolvers = {
  User: {
    // friends 필드 리졸버
    friends: async (parent) => {
      // parent.id로 친구 목록 조회
      return await db.users.findFriends(parent.id);
    },
    // city 필드 리졸버
    city: async (parent) => {
      // parent.cityId로 도시 정보 조회
      return await db.cities.findById(parent.cityId);
    }
  },
  
  City: {
    // residents 필드 리졸버
    residents: async (parent) => {
      // parent.id로 해당 도시의 거주자 목록 조회
      return await db.users.findByCityId(parent.id);
    }
  }
}

• 실제 동작과정은 아래와 같고.

query {
  user(id: "1") {    # 1. 먼저 user 조회
    name
    friends {        # 2. friends 리졸버 호출
      name
      city {         # 3. 각 친구의 city 리졸버 호출
        name
        residents {  # 4. residents 리졸버 호출
          name
        }
      }
    }
  }
}

• 즉, 각 필드마다 리졸버 함수가 존재하고, 리졸버가 실제 데이터 연결을 처리한다.
• 각 리졸버는 필요한 데이터소스에서 데이터를 가져온다.