✍️
TIL
  • TIL
  • react
    • react 16.3 이후 라이프 싸이클
    • 함수형 컴포넌트 vs 클래스 컴포넌트
    • React의 장점
    • 기본문법
    • Flow Diagram
    • redux-saga
    • nextjs
    • mobx
    • 리액트는 어떻게 동작할까?
  • data-structure
    • 이진 검색 트리(binary search tree)
    • HashTable
    • Tree
    • 트라이(Trie)
    • 선형 구조 vs 비선형 구조
    • 연결 리스트(linked-list)
    • Queue
    • Graph
    • Heap
    • Stack
  • web
    • 웹 브라우저의 동작 원리
    • Basic
    • Webpack이란?
    • rendering
    • npm
    • babel
  • graphQL
    • Query
    • Mutation
    • Introduction
  • algorithm
    • big-o
    • 버블 정렬(bubble sort)
    • 힙 정렬(heap sort)
    • 선택 정렬(selection sort)
    • 퀵 정렬(quick sort)
    • 백트래킹 알고리즘
    • 삽입 정렬(insertion sort)
    • 계수 정렬(counting sort)
    • 다엑스트라 알고리즘
    • 이진 탐색
    • 합병 정렬(merge-sort)
    • 동적 계획법(Dynamic programming)
  • web-security
    • XSS(Cross Site Scripting)
    • CSRF(Cross-site request forgery)
    • Tabnabbing
  • javaScript
    • dom
    • 자바스크립트 성능 최적화
    • Event Loop
    • Snippets
    • javaScript
  • programming-paradigm
    • Object Oriented Programming
    • 함수형 프로그래밍
    • 구조적 프로그래밍
  • computer-science
    • Process vs Thread
    • 비트 연산자
    • 그레이 코드
  • vue
    • Vue
  • design-pattern
    • MVP pattern
    • Flux
    • 아토믹 디자인
    • MVVM pattern
    • MVC pattern
  • css
    • css
    • Grid
    • css-methodologies
    • FlexBox
  • html
    • html
  • regExp
    • regExp
  • git
    • Git-flow
Powered by GitBook
On this page
  • Fields
  • Arguments
  • Aliases
  • Variables
  • Fragments
  • Inline-fragment
  • Directives

Was this helpful?

  1. graphQL

Query

서버에서 데이터 가져오기(fetch)를 할떄 사용합니다.(rest API에서 get)

Fields

{
  hero {
    name
  }
}

hero 루트 필드에서 name 필드 값을 요청합니다.

{
  hero {
    name
    age
  }
}

hero 루트 필드에서 name, age 필드 값을 요청합니다.

Arguments

GraphQL에서는 각 필드가 스키마에 정의된 규칙에 따라 0개 이상의 인자를 가질 수 있습니다.

{
  hero(id: 1) {
    name
  }
}

id가 1인 hero의 name 필드 값만 요청합니다.

Aliases

{
  empireHero: hero(episode: "EMPIRE") {
    name
  }
  jediHero: hero(episode: "JEDI") {
    name
  }
}

같은 query를 여러번 요청해야 될 경우 alias를 써서 요청할 수 있습니다.

Variables

query HeroNameAndFriends($episode: Episode = "JEDI") {
  hero(episode: $episode) {
    name
    friends {
      name
    }
  }
}
  • 동적으로 인자에 값을 전달할땐 변수를 사용 할 수 있습니다.

  • 타입 선언 다음에 기본값을 명시하여 쿼리의 변수에 기본값을 할당할 수 있습니다.

  • $episode hero의 이름과 친구들의 이름을 요청

Fragments

query HeroComparison($first: Int = 3) {
  leftComparison: hero(episode: EMPIRE) {
    ...comparisonFields
  }
  rightComparison: hero(episode: JEDI) {
    ...comparisonFields
  }
}
​
fragment comparisonFields on Character {
  name
  friendsConnection(first: $first) {
    totalCount
    edges {
      node {
        name
      }
    }
  }
}

중복되는 코드가 있을경우 fragment를 사용하여 제거 할 수 있습니다.

fragment를 선언 할 때 on 뒤에 data type을 지정해줘야합니다.

필드의 반환값이 해당 data type일 경우에만 실행 됩니다.

Inline-fragment

query HeroForEpisode($ep: Episode!) {
  hero(episode: $ep) {
    name
    ... on Droid {
      primaryFunction
    }
    ... on Human {
      height
    }
  }
}

반환 되는 hero 객체의 타입에 따라서 요청하는 필드의 조건을 바꿔야 할경우 인라인 프래그먼트를 사용합니다.

hero의 타입이 Droid일 경우 primaryFunction값을 반환하고 Human일경우 height값을 반환합니다.

Directives

query Hero($episode: Episode, $withFriends: Boolean!) {
  hero(episode: $episode) {
    name
    friends @include(if: $withFriends) {
      name
    }
  }
}
  • @include(if: Boolean): Boolean값이 true 인 경우에만 필드를 결과에 포함합니다.

  • @skip(if: Boolean) Boolean값이 true면 필드를 건너뜁니다.

PreviousgraphQLNextMutation

Last updated 5 years ago

Was this helpful?