// 21.11.24 스터디 정리

GraphQL

• 페이스북에서 만든 클라이언트-서버 간 쿼리 언어
• 쿼리언어이지만 웹 클라이언트가 데이터를 서버로부터 효율적으로 가져오는 것이 목적
• 실제로 데이터를 사용하는 쪽인 클라이언트에 어떤 데이터가 필요한 지 명시적으로 선언하여 단 하나의 엔드포인트를 통해 서버에 데이터를 요청함으로써 RESTful API에 비해 유연한 모델 스키마의 작성이 가능

구조

• Query/ Mutation

• 쿼리는 읽는데 사용하고(R), 뮤테이션은 데이터를 변조함(CUD)

• query: 데이터를 받아올 때 사용한다.

• mutation: 데이터를 생성, 수정, 삭제할 때 사용한다.

• subscription: 웹소켓을 사용해 실시간 양방향 통신을 구현할 때 사용한다.

• React Apollo client 경우에는 variables 라는 파라메터에 원하는 값을 넣어주면 됨

query getStudentInfomation($studentId: ID){
  personalInfo(studentId: $studentId) {
    name
    address1
    address2
    major
  }
  classInfo(year: 2018, studentId: $studentId) {
    classCode
    className
    teacher {
      name
      major
    }
    classRoom {
      id
      maintainer {
        name
      }
    }
  }
  SATInfo(schoolCode: 0412, studentId: $studentId) {
    totalScore
    dueDate
  }
}

스키마/타입(schema/type)

• dhqmwprxm xkdlqrhk vlfem

type Character {
  name: String!
  appearsIn: [Episode!]!
}

• 오브젝트 타입 : Character
• 필드 : name, appearsIn
• 스칼라 타입 : String, ID, Int 등
• 느낌표(!) : 필수 값을 의미(non-nullable)
• 대괄호([, ]) : 배열을 의미(array)

장점

1. 클라이언트가 필요한 데이터를 정확히 지정가능
2. Data Fetching 시, 단일쿼리에 구체적인 데이터 요구 사항을 적어 서버에 보내기만 하면 됨
3. 데이터에 Type 시스템을 사용 → 엄격한 type 스키마를 통해 유요한 쿼리인지 확인
   1. 일단 유효한 것으로 확인되면 서버의 리졸버가 쿼리를 처리함

 type user {
     name: String
     email: String
     phoneNumber: String
}

Apollo와 함께 사용하기

• Apollo는 편하게 GraphQL을 사용할 수 있는 기능을 제공하는 클라이언트 라이브러리 중 하나 (상태 관리 플랫폼)
• 데이터 캐싱이나 쿼리의 인터페이스 정의를 좀 더 쉽게 해줌

참고: https://velog.io/@bangina/Apollo-client-GraphQL-React.js-의-모든-것

ROBO 패턴

객체로 바독 개체로 반환한다 (Receive and objext, return an object)

구조분해 할당