GraphQL

Code_Builder·2024년 9월 19일
0
post-thumbnail

GraphQL 이란?

페이스북에서 개발한 API 쿼리 언어로, 클라이언트에게 요청한 만큼의 데이터를 제공

쉽게 말해서 클라이언트에서 이거이거만 필요해요 하면 골라서 주는 선택적 쿼리라고 생각하면 된다


특징

  • 유연한 데이터 요청: 클라이언트는 필요한 필드만 요청 가능
{
  user(id: "1") {
    name
    email
  }
}
** 이런식으로 클라이언트가 원하는 데이터만 요청가능

  • 단일 엔드포인트: 모든 요청이 하나의 URL(주로 /graphql이라는 단일 엔드포인트)로 처리되며, REST보다 더 간결한 구조
query {
  users {
    id
    name
  }
}
  • 하나의 URL(주로 /graphql이라는 단일 엔드포인트)에서 작동하는(?) 코드 예시(NodeJs 기반 토이프로젝트 중 일부)
app.use('/graphql' , graphqlHTTP({
  schema: graphqlSchema, # 스키마 정의 객체
  rootValue: graphqlResolver, # GraphQL 쿼리를 실행할 때 사용하는 리졸버(resolver) 함수(REST API 구조에서의 컨트롤러와 유사한 역할)
  graphiql: true
}));

  • 타입 시스템: 명확한 스키마를 정의하여 데이터 구조와 타입을 명시
type User {
  id: ID!
  name: String!
  email: String!
}
** !는 필수임을 명시

  • 실시간 데이터: 구독(subscription) 기능을 통해 실시간 데이터 업데이트를 지원
subscription {
  messageAdded {
    id
    content
    sender {
      id
      name
    }
  }
}
 => 새로운 메시지가 추가될 때마다 메시지의 ID, 내용, 발신자의 정보를 실시간으로 수신

Mutation

서버의 데이터를 변경하는 작업을 수행하는 쿼리

특징

  • 데이터 변경: 뮤테이션은 데이터의 상태를 변경하는 데 사용(=> Update Query)

  • 명시적 요청: 뮤테이션은 클라이언트가 요청하는 데이터의 형식과 내용을 명확하게 정의
    ex) 토이프로젝트 일부 코드에서의 예시

       input UserInputData {
        email: String!
        name: String!
        password: String!
    }
    
    type RootMutation {
        createUser(userInput: UserInputData): User!
    }
  • 비동기 처리: 뮤테이션은 비동기적으로 처리(프로미스(Promise)를 반환)

  • 명령형: 뮤테이션은 일반적으로 명령형으로 동작
    ex)

    mutation {
      createUser(userInput: { email: "test@example.com", name: "Hanjin", password: "tester" }) {
        _id
         email
         name
       }
    }

장점

  • 효율성: 클라이언트가 필요한 데이터만 요청하여 데이터 전송량 감소(불필요한 데이터 전송 안함)
  • 유연성: 다양한 데이터 요구 사항에 쉽게 대응
  • 개발 생산성: 명확한 스키마와 쿼리 언어 덕분에 프론트엔드 개발자와 백엔드 개발자 간의 협업 용이(실무에서 GraphQL을 써본적이 없어 잘 모르겠음...., 근데 써보니까 그런거 같음)

참 신기한 쿼리 인거 같다 얼른 실무에서 한번 써보고 싶은 기술 스택중 한개이다..
막상 쓰려면 잘 못쓰겠지.....

NodeJs(ExpressJs 기반) + GraphQL(원래는 몽구스를 통한 몽고 DB 연결했었음) 개발중인 레포
링크: https://github.com/Engineer-kim/NodeRestApI

profile
사소한일에도 최선을 다하기

0개의 댓글

관련 채용 정보