GraphQL이란?

백성훈 Seonghoon Baek
GraphQL 이란

•API
•Query Language
•Type System
•Schema Definition Language
•Thinking in Graph
•GraphQL Flow
GraphQL이란?

A Collective list of public GraphQLAPIs

WHAT IS GRAPHQL?
ref: GraphQL.org
“GraphQL is a query language for your API,
and a server-side runtime for executing queries
by using a type system you deﬁne for your data”

Type SystemQuery LanguageAPI

API

{
avatar: ‘….png’,
issue: [
{
id: 1,
content: ‘이슈1’
}
]
}

Server
query
Response
Query Language
Client
profile정보 중에 name, id만 줘
name, id

Query의 기본구조
Query Language
query{
profile(id=“Lutece”) {
name
}
}
query{
Query Name(arg: value) { 
field
}
}

Query
{
name
}
}
{
data: {
“profile”: {
“name”: “SeonghoonBaek”
}
}
}
Response
Query Language

Query Language
Client Query Server Response

데이터의 응답 형태를 예측할 수 있다.
클라이언트에 최적화된 데이터 형태를 가져올 수 있다.
Query Language

Type System
Schema Definition Language

데이터의 구조와 데이터간의 관계를 정의하는 방법
Type System

Type System
Query
{
name
}
}
Type
type User {
name: String
id: String
}
Type
type Query {
profile(id: String): User
}

Type System
Type (Object)
type User {
name: String
}
Scalar Type
1.INT
2.String
3.Float
4.ID
5.Enum
6.Boolean
Shape
1.list = [INT]
2.interface
3.Union
4.fragment
5.alias
6.! = Non-Null

Type System
Type
type User {
name: String
}
Scalar Type
1.INT
2.String
3.Float
4.ID
5.Enum
6.Boolean
Custom Type

응답 데이터의 타입 추론이 가능하다
Type System

type User {
name: String
avatar: Url
age: Int
createdAt: Date
id: String
}
type Query {
}
Server

Client
type User {
name: String
avatar: Url
age: Int
createdAt: Date
id: String
}
{
profile(id=“Lutece”)
{
name
}
}
type Query {
}
Server

Client
type User {
name: String
avatar: Url
age: Int
createdAt: Date
id: String
}
{
{
name
}
}
type Query {
}
Server
query

Client
type User {
name: String
avatar: Url
age: Int
createdAt: Date
id: String
}
{
{
name
}
}
type Query {
…
}
Server
query
Resolver

Type System
resolver: {
Query: {
profile: (obj, args, context, info){
const profileList = … (from DB, 외부 API..)
return profileList
.find(({ id }) => id === args.id)
}, 
profiles: () {…}
articles: () {…}
}
}
Resolver

Type System
{
name
}
}
Query
resolver: {
Query: {
return profileList
}, 
profiles: () {…}
articles: () {…}
}
}
Resolver

Type System
{
name
}
}
Query
resolver: {
Query: {
return profileList
}, 
profiles: () {…}
articles: () {…}
}
}
Resolver
type User {
name: String
avatar: Url
age: Int
createdAt: Date
id: String
}
type Query {
…
}
Type System

Type System
{
name
}
}
Query
resolver: {
Query: {
return profileList
}, 
profiles: () {…}
articles: () {…}
}
}
Resolver
type User {
name: String
avatar: Url
age: Int
createdAt: Date
id: String
}
type Query {
…
}
Type System
{
data: {
“profile”: {
}
}
}

Client
type User {
name: String
avatar: Url
age: Int
createdAt: Date
id: String
}
{
{
name
}
}
type Query {
}
Server
query
Resolver
{
data: {
“profile”: {
}
}
}

Graph
type User {
name: String
id: String
contact: Contact
}
type Contact {
phone: String
home: String
}
Thinking in Graph

Thinking in Graph
Data Graph
추상화
Type
Type
Type
Type

Data Graph
추상화
Type
Type
Type
Type
Tree
Query
data
Thinking in Graph

With GraphQL, you model your business domain as a graph

Resource
GraphQL Flow
type User {
name: String
avatar: Url
age: Int
createdAt: Date
id: String
}
type Query {
}

GraphQL Flow
type User {
name: String
avatar: Url
age: Int
createdAt: Date
id: String
}
type Query {
}

GraphQL Flow
type User {
name: String
avatar: Url
age: Int
createdAt: Date
id: String
}
type Query {
}
{
name
avatar
age
createdAt
}
}
{
avatar
name
}
}

GraphQL Flow
type User {
name: String
avatar: Url
age: Int
createdAt: Date
id: String
}
type Query {
}
{
name
avatar
age
createdAt
}
}
{
avatar
name
}
}
{
data: {
“profile”: {
“age” : 29
“avatar” : “https:…”
“createdAt: “19..”
“id”: “123123”
}
}
}
{
data: {
“profile”: {
“avatar” : “https:…”
}
}
}
Resolver

GraphQL이란?

Recommended

Recommended

More Related Content

Similar to GraphQL이란?

Similar to GraphQL이란? (20)

More from 성훈 백

More from 성훈 백 (6)

Recently uploaded

Recently uploaded (20)

GraphQL이란?