Что попадает в Patch?

HTTP PATCH метод: содержание и применение

PATCH — это HTTP метод для частичного обновления ресурса на сервере. В отличие от PUT, который полностью заменяет ресурс, PATCH позволяет изменить только те поля, которые указаны в запросе.

Различие PATCH и PUT

PUT — полное замещение ресурса:

// Исходный ресурс
{
  id: 1,
  name: 'Alice',
  email: 'alice@example.com',
  phone: '123-456-7890'
}

// PUT запрос отправляет полный объект
PUT /api/v1/users/1
{
  name: 'Alice',
  email: 'alice@example.com',
  phone: '987-654-3210'
}
// Результат: только эти три поля остаются, остальное удаляется

PATCH — частичное обновление:

// PATCH запрос отправляет только измененные поля
PATCH /api/v1/users/1
{
  phone: '987-654-3210'
}
// Результат: обновляется только телефон, остальное остаётся на месте

Что попадает в PATCH запрос

1. Только измененные поля

PATCH содержит только те свойства объекта, которые нужно изменить:

// Пример 1: Обновление одного поля
fetch('/api/v1/users/123', {
  method: 'PATCH',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    email: 'newemail@example.com'
  })
});

// Пример 2: Обновление нескольких полей
fetch('/api/v1/products/456', {
  method: 'PATCH',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    price: 99.99,
    stock: 150
  })
});

// Пример 3: Обновление вложенных полей
fetch('/api/v1/settings', {
  method: 'PATCH',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    theme: 'dark',
    notifications: {
      email: true,
      push: false
    }
  })
});

Форматы PATCH запросов

1. JSON Patch (RFC 6902)

Стандартный формат для описания операций над JSON:

PATCH /api/v1/users/1
Content-Type: application/json-patch+json

[
  { "op": "replace", "path": "/email", "value": "newemail@example.com" },
  { "op": "add", "path": "/phone", "value": "555-1234" },
  { "op": "remove", "path": "/middleName" }
]

Доступные операции:

• add — добавить поле
• remove — удалить поле
• replace — заменить значение
• move — переместить значение
• copy — скопировать значение
• test — проверить значение

2. Merge Patch (RFC 7386)

Простой формат — просто отправляешь объект с измененными полями:

PATCH /api/v1/users/1
Content-Type: application/merge-patch+json

{
  "email": "newemail@example.com",
  "profile": {
    "bio": "Updated bio"
  }
}

Примеры в разных фреймворках

Axios:

const updateUser = async () => {
  try {
    const response = await axios.patch('/api/v1/users/123', {
      email: 'newemail@example.com',
      status: 'active'
    });
    console.log(response.data);
  } catch (error) {
    console.error('Update failed:', error);
  }
};

Fetch API:

const updateUser = async () => {
  const response = await fetch('/api/v1/users/123', {
    method: 'PATCH',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      email: 'newemail@example.com',
      status: 'active'
    })
  });
  
  if (!response.ok) {
    throw new Error('Update failed');
  }
  
  return response.json();
};

React с использованием хука:

const useUpdateUser = () => {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const updateUser = async (userId: number, updates: Partial<User>) => {
    setLoading(true);
    setError(null);
    
    try {
      const response = await fetch(`/api/v1/users/${userId}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(updates)
      });
      
      if (!response.ok) throw new Error('Update failed');
      return response.json();
    } catch (err) {
      setError((err as Error).message);
      throw err;
    } finally {
      setLoading(false);
    }
  };

  return { updateUser, loading, error };
};

Реальный пример: Форма обновления профиля

interface UserProfile {
  id: string;
  name: string;
  email: string;
  bio: string;
  avatar: string;
}

const ProfileForm: React.FC<{ userId: string }> = ({ userId }) => {
  const [profile, setProfile] = useState<UserProfile | null>(null);
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setIsSubmitting(true);

    try {
      // Собираем только измененные поля
      const formData = new FormData(e.currentTarget);
      const updates = {
        email: formData.get('email'),
        bio: formData.get('bio'),
        avatar: formData.get('avatar')
      };

      // PATCH запрос
      const response = await fetch(`/api/v1/users/${userId}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(updates)
      });

      if (!response.ok) throw new Error('Update failed');
      
      const updatedProfile = await response.json();
      setProfile(updatedProfile);
    } catch (error) {
      console.error('Error updating profile:', error);
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="email" type="email" required />
      <textarea name="bio" />
      <input name="avatar" type="file" />
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Saving...' : 'Save'}
      </button>
    </form>
  );
};

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

• Экономия трафика — передаёшь только измененные данные
• Снижение конфликтов — меньше вероятность перезаписи данных других пользователей
• Ясность намерений — очевидно, что это частичное обновление, а не полная замена
• Оптимизация на сервере — сервер может обновлять только нужные поля

PATCH vs PUT vs POST

Типичные случаи PATCH в приложениях

1. Обновление профиля — изменение только необходимых полей
2. Включение/отключение настроек — изменение одного флага
3. Обновление статуса — изменение состояния ресурса
4. Частичное редактирование — пользователь меняет только некоторые поля формы
5. API интеграции — когда нужно обновить несколько связанных полей