Как сделать темизацию сайта?

Отличие Rest API от GraphQL

Это два разных подхода к построению API. Rest API доминирует последние 15 лет, GraphQL появился позже и решает некоторые проблемы Rest.

Rest API — ресурсный подход

Rest использует HTTP методы (GET, POST, PUT, DELETE) и URL ресурсы:

// Получить пользователя
GET /api/users/1
Response: { id: 1, name: 'John', email: 'john@example.com', age: 30 }

// Создать пользователя
POST /api/users
Body: { name: 'Alice', email: 'alice@example.com' }

// Обновить пользователя
PUT /api/users/1
Body: { age: 31 }

// Удалить пользователя
DELETE /api/users/1

// Получить посты пользователя
GET /api/users/1/posts
Response: [{ id: 1, title: 'Post 1', content: '...' }]

// Получить комментарии поста
GET /api/posts/1/comments

Проблемы:

• Over-fetching: получаешь лишние поля
• Under-fetching: нужны несколько запросов
• Множество endpoint'ов для разных данных

GraphQL — граф данных

GraphQL позволяет запросить ровно те данные, которые нужны:

// Один запрос вместо нескольких
query {
  user(id: 1) {
    id
    name
    email
    posts {
      id
      title
      comments {
        id
        content
      }
    }
  }
}

// Mutation для изменения данных
mutation {
  updateUser(id: 1, name: "Bob") {
    id
    name
    email
  }
}

// Subscription для real-time
subscription {
  userUpdated {
    id
    name
  }
}

Преимущества:

• Запросишь ровно то, что нужно
• Один endpoint для всех запросов
• Сильная типизация (schema)
• Отличная документация из schema

Сравнение

Практический пример

Rest API - нужны 3 запроса:

const user = await fetch('/api/users/1').then(r => r.json())
const posts = await fetch('/api/users/1/posts').then(r => r.json())
const comments = await Promise.all(
  posts.map(p => fetch(`/api/posts/{p.id}/comments`).then(r => r.json()))
)

GraphQL - один запрос:

const query = `
  query {
    user(id: 1) {
      id
      name
      posts {
        id
        title
        comments { id content }
      }
    }
  }
`
const data = await fetch('/graphql', {
  method: 'POST',
  body: JSON.stringify({ query })
}).then(r => r.json())

Когда использовать что

• Rest API: простые CRUD операции, публичные API, когда скорость важнее всего
• GraphQL: сложные структуры данных, мобильные приложения (меньше трафика), когда гибкость важна

Современные приложения часто используют оба подходы вместе.