1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// REST API 사용 시 (Over-fetching 발생)
GET /api/users/1

// 실제 응답 데이터 (필요 이상의 데이터를 받음)
{
  "id": 1,
  "name": "Chuck",           // 👈 실제로 필요한 데이터
  "email": "chuck@test.com", // 👈 불필요한 데이터
  "phone": "010-1234-5678",  // 👈 불필요한 데이터
  "address": "Seoul",        // 👈 불필요한 데이터
  "age": 20,                 // 👈 불필요한 데이터
  "gender": "male"           // 👈 불필요한 데이터
}

// GraphQL 사용 시 (Over-fetching 해결)
query {
  user(id: 1) {
    name  // 👈 필요한 데이터만 요청
  }
}

// GraphQL 응답
{
  "data": {
    "user": {
      "name": "Chuck"  // 필요한 데이터만 받음
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// REST API 사용 시 (Under-fetching 발생)
// 필요한 데이터를 위해 3번의 API 호출 필요
GET /api/users/1         // 사용자 정보
GET /api/users/1/posts   // 사용자의 게시글
GET /api/users/1/followers // 사용자의 팔로워

// GraphQL 사용 시 (Under-fetching 해결)
// 한 번의 요청으로 모든 데이터 조회
query {
  user(id: 1) {
    name
    posts {
      title
      content
    }
    followers {
      name
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Over-fetching & Under-fetching 발생
async function getUserProfile(userId) {
  // 3번의 API 호출 필요 (Under-fetching)
  const user = await fetch(`/api/users/${userId}`);
  const posts = await fetch(`/api/users/${userId}/posts`);
  const followers = await fetch(`/api/users/${userId}/followers`);

  // 각 응답에는 필요 이상의 데이터 포함 (Over-fetching)
  return {
    user: await user.json(),
    posts: await posts.json(),
    followers: await followers.json(),
  };
}

1
2
3
4
5
6
7
8
9
10
11
12
13
// 모바일 프로필 화면 (작은 화면)
// 불필요하게 많은 데이터를 받아옴
GET /api/users/1
{
  "id": 1,
  "name": "Chuck",
  "email": "chuck@test.com",
  "phone": "010-1234-5678",
  "address": "Seoul",
  "detailedInfo": "...", // 모바일에선 표시되지 않는 정보
  "preferences": {...},   // 불필요한 데이터
  "settings": {...}       // 불필요한 데이터
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// REST API - 단순하고 직관적
GET /api/posts           // 목록 조회
POST /api/posts         // 생성
PUT /api/posts/1        // 수정
DELETE /api/posts/1     // 삭제

// GraphQL - 오히려 복잡
mutation {
  createPost(input: { title: "제목", content: "내용" }) {
    id
    title
    content
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// REST API - 간단한 파일 업로드
const formData = new FormData();
formData.append('file', file);

fetch('/api/upload', {
  method: 'POST',
  body: formData
});

// GraphQL - 복잡한 설정 필요
import { ReactNativeFile } from 'apollo-upload-client';

const file = new ReactNativeFile({
  uri: '...',
  type: 'image/jpeg',
  name: 'photo.jpg',
});

mutation($file: Upload!) {
  uploadFile(file: $file) {
    url
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// REST API - 브라우저 기본 캐싱 활용
fetch("/api/posts/1", {
  headers: {
    "Cache-Control": "max-age=3600",
  },
});

// GraphQL - 복잡한 캐싱 로직 구현 필요
const client = new ApolloClient({
  cache: new InMemoryCache(),
  typePolicies: {
    Query: {
      fields: {
        posts: {
          merge(existing, incoming) {
            // 복잡한 캐싱 로직...
          },
        },
      },
    },
  },
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// REST API - 이해하기 쉬운 엔드포인트
GET /api/v1/weather?city=seoul
GET /api/v1/products?category=electronics

// GraphQL - 러닝커브가 있는 쿼리 언어
query {
  weather(city: "seoul") {
    temperature
    humidity
  }
  products(category: "electronics") {
    name
    price
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// REST API - 리소스 구조가 명확
GET /api/books
GET /api/books/1
GET /api/books/1/reviews

// GraphQL - 과도한 설정이 될 수 있음
type Book {
  id: ID!
  title: String!
  author: String!
  reviews: [Review!]!
}

type Review {
  id: ID!
  content: String!
  rating: Int!
}